如何使用 .each 遍历 div 中的元素？

Question

我试过阅读 jQuery 的 api，但这只是我第二次使用 jQuery，所以我发现自己有点迷茫。

我有一个 div 设置，下面有一个图像列表。

<div id="slides">
    <img src="images/casting1.jpg" alt="Casting on the Upper Kings">
    <img src="images/casting2.jpg" alt="Casting on the Lower Kings">
    <img src="images/casting3.jpg" alt="Casting at another location!">
    <img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn">
    <img src="images/fish.jpg" alt="Catching on the South Fork">
    <img src="images/fish1.jpg" alt="Catching on the North Fork">
    <img src="images/lures.jpg" alt="The Lures for Catching">
</div>

所以我首先 select 使用 div 编辑了 div：

var slides = $("#slides");

但从那里我不知道该往哪个方向前进。我如何 select div div 中的 individual 项目？非常感谢任何帮助或指导！

Answer 1

您可以使用 find 或 contextSelector 获取子项。

var $slides = $("#slides");

var allImages = $slides.find('img'); or // $('img', $slides)

如果您想遍历图像，只需使用 each 循环专门针对每个图像。

如果你想select特定图片。

    $('img', $slides).eq(1)  // Will get you the second image in the div.

Answer 2

$('#slides img').each(function(){
//code required using $(this).... to target each particular image of that iteration
})

Answer 3

您有 2 个选择，.find() 或 .children()，.children('img') 与 .find('> img')

相同

var slides = $("#slides");

slides.children('img').each(function (idx, elem) {
    console.info(idx, elem);
});

Answer 4

像这样

slides.find("img").each(function(index, element){
    //keep in mind, element is a HTMLElement
    //not a JqueryObject, in order to manipulate
    //it with jquery use: $(element)
})

Answer 5

试一试...

var slides = $("#slides > img").each(function () {});

console.log(slides);

记录所有 img 元素的数组

Answer 6

您可以使用 $("#slides img").each

遍历每个 <img>

$("#slides img").each(function(){
  // do something 
});

Answer 7

使用您已经创建的变量：

slides.children('img').each(function(){
  // here use this for the HTML element or $(this) for the jQuery wrapped one
});

如何使用 .each 遍历 div 中的元素？

How to loop over elements in a div using .each?

html

javascript

each

jquery

jquery-selectors