Question

我正在学习JQuery，我在编写代码时遇到了麻烦，该代码从HTML代码输出CSV格式的逗号分隔列表。我试图将图像的标题放在逗号分隔列表中。

以下是我使用的HTML：

<html>
   <head>
   </head>
   <body>
      <img src="/images/title.jpg" title="TITLE IMAGE" />
      <div id="brand-container">
         <div class="xyz">
            <img src="/images/brand1.jpg" title="Adidas" />
            <img src="/images/brand2.jpg" title="Dr Martens" />
            <img src="/images/brand3.jpg" title="Fred Perry" />
            <img src="/images/brand4.jpg" title="Lacoste" />
         </div>
      </div>
      <div class="xyz">
         <img src="/images/other.jpg" title="OTHER IMAGE" />
      </div>
   </body>
</html>

我尝试使用以下JQuery代码。

var title = $(':').map(function() { 
    return this.value; 
}).get().join(',');

Answer 1

这是一个简单的代码片段，可能会对您有所帮助。你应该做的是将所有元素存储在一个变量中，然后通过它将标题字符串存储在某种对象/数组中进行迭代。然后简单地将结果字符串化。我希望它会对你有所帮助。

var images = $('.xyz > img'),
  results = [],
  textarea = $('#csv');
$.each(images, function() {
  results.push($(this).prop('title'));
});
textarea.text(results.join());

#csv {
  height: 100px;
  width: 400px;
  padding: 5px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/images/title.jpg" title="TITLE IMAGE" />
<div id="brand-container">
  <div class="xyz">
    <img src="/images/brand1.jpg" title="Adidas" />
    <img src="/images/brand2.jpg" title="Dr Martens" />
    <img src="/images/brand3.jpg" title="Fred Perry" />
    <img src="/images/brand4.jpg" title="Lacoste" />
  </div>
</div>
<div class="xyz">
  <img src="/images/other.jpg" title="OTHER IMAGE" />
</div>

<textarea id="csv"></textarea>

Answer 2

您的意思是输出页面中的所有图片标题吗？

title对象中的img属性由$（'＃???'）引用.title
要返回所有图像对象，请使用$（'img'）。如果您想在div $('#brand-container img')中输出标题，请使用brand-container;

这就是答案：

var title = $('img').map(function() {return this.title; }).get().join(',');

返回 "TITLE IMAGE,Adidas,Dr Martens,Fred Perry,Lacoste,OTHER IMAGE"

JQuery，以CSV格式输出逗号分隔列表

2 个答案: