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

【问题标题】：jQuery loop through child elements to get attr valuejQuery循环遍历子元素以获取attr值
【发布时间】：2014-11-27 01:52:39
【问题描述】：

我正在尝试遍历元素子元素以获得 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>

我想从所有项目中获取标题属性并合并为 1 个标题。

这是我的脚本：

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

console.log(test);

我是否以正确的方式处理这个问题？

【问题讨论】：

没有。 console.log($(".deal").get().map(function(d) {return d.title;}).join("\n"));
@NiettheDarkAbsol .deal 没有任何标题属性，您需要遍历其子级。
是的，我的意思是 ".deal>[title]" 或其他 XD

标签： javascript loops

【解决方案1】：

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

在此示例中，我只是用逗号将它们连接起来。

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

alert(all);

<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>

【讨论】：

【解决方案2】：

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

var combined = [];

$(".deal img").each(function() {
  combined.push($(this).attr('title'));
});

var combinedStr = combined.join(", ");

$("#title").text("Above: " + combinedStr);

<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>

【讨论】：

很好的回答乔希； .each 对我来说似乎更合乎逻辑，并且与 .each 和 map 相比，每个答案似乎使用更少的内存stackoverflow.com/questions/749084/jquery-map-vs-each

【解决方案3】：

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

// 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 );

<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>

【讨论】：