Question

我正在尝试遍历一个元素子元素以获得attr值。我的HTML看起来像这样：

<div class="deal">
   <img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>

我想让所有项目的标题attr并合并成1个标题。

这是我的剧本：

$(".deal").each(function() {
  var test = $(this).attr('title');
}

console.log(test);

我是以正确的方式接近这个吗？

Answer 1

jQuery.map允许您枚举一组元素并对每个元素执行操作。在您的情况下，您想要提取title并将这些项目连接在一起。

在这个例子中，我只是用逗号加入了它们。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
   <img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>

＆＃13;

Answer 2

$.each遍历选择器的结果，在您尝试的时候是容器元素，而不是它的子元素。你想调整选择器来找到子img标签，建立他们的标题数组，最后用逗号或你喜欢的任何分隔符连接数组：

＆＃13;

var combined = [];

$(".deal img").each(function() {
  combined.push($(this).attr('title'));
});

var combinedStr = combined.join(", ");

$("#title").text("Above: " + combinedStr);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
   <img src="http://lorempixel.com/60/40" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="http://lorempixel.com/60/40" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="http://lorempixel.com/60/40" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>
<div id="title"></div>

＆＃13;

Answer 3

你正在接近正确的方式，但每次通过时你都会抛出test变量。此外，您要确保您的选择器与img元素匹配，而不是父div。

＆＃13;

// this is just debugging code specific to SO
var console = {
  "log": function(i) {
     var li = $('<li />');
      li.html(JSON.stringify(i));
      li.appendTo('#logger');
   }
};

//  this is the answer
var titles_as_array = [], titles_as_string='';

$('.deal img').each(function(el){
  titles_as_array.push( this.title );
});

titles_as_string = titles_as_array.join(' ');

console.log( titles_as_array );

console.log( titles_as_string );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
   <img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>

<ul id="logger"></ul>

＆＃13;

jQuery循环遍历子元素以获取attr值

3 个答案: