为什么 jQuery.find() 只返回第一个元素？

Question

我正在尝试使用find() function 来获取我的所有子元素， each() function 我期待它返回所有元素，但它只获得第一个元素。 这两个功能有什么误解吗？

 if ($('.test').length > 0) { var srcset; $(".test").each(function(index, ele) { srcset = $(ele).find("source").attr("srcset"); console.log(srcset); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <picture class="test"> <source srcset="###"> <source srcset="###"> <source srcset="###"> <img src="#" alt=""> </picture>

Answer 1

你得到第一个是因为.attr()将返回第一个元素属性，你必须使用.each()循环选择，还有一个你可以直接使用".test source"选择器的东西，这是一个工作片段：

 if ($('.test').length > 0) { srcset = $(".test source"); srcset.each(function(i, el){ console.log($(el).attr('srcset')); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <picture class="test"> <source srcset="###"> <source srcset="###"> <source srcset="###"> <img src="#" alt=""> </picture>

Answer 2

实际上， .find("source")返回所有元素，如您在此处看到的：

 $(".test").each(function() { var source = $(this).find("source"); console.log(source.length); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <picture class="test"> <source srcset="###"> <source srcset="###"> <source srcset="###"> <img src="#" alt=""> </picture>

您可以在上面看到source.length返回3 ，但问题在于.attr("srcset") 。 当我们使用.attr()时，它只返回集合中第一个匹配元素的值。 要解决此问题，您只需遍历所有source元素，然后获取srcset如下：

 var srcset; $(".test source").each(function() { srcset = $(this).attr("srcset"); console.log(srcset); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <picture class="test"> <source srcset="/abc"> <source srcset="/123"> <source srcset="/example/object/"> <img src="#" alt=""> </picture>