Jquery中find与each方法用法实例

find方法的用法

基本用法

find 方法用于查找所有匹配的后代元素。

$(selector).find(filter)

参数：

• selector: 必需，被查找的元素
• filter: 可选，用于过滤要查找的元素

示例：

<div class="container">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
    <p>paragraph text</p>
</div>

var listItems = $('.container').find('li'); // 查找所有的 li 元素

过滤查找结果

可以传入 CSS 选择器或 JQuery 过滤函数作为 find 方法的参数，进行查找结果的过滤。

CSS 选择器

<div class="container">
    <ul>
        <li class="active">list item 1</li>
        <li>list item 2</li>
        <li class="active">list item 3</li>
    </ul>
    <p>paragraph text</p>
</div>

var activeListItems = $('.container').find('li.active'); // 查找具有 active 类的 li 元素

JQuery 过滤函数

<div class="container">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
    <p>paragraph text</p>
</div>

var listItems = $('.container').find('li');
var oddListItems = listItems.filter(function(index) { // 查找所有奇数索引的 li 元素
    return index % 2 === 0;
});

each方法的用法

基本用法

each 方法用于对匹配的元素集合中的各个元素执行指定的函数。

$(selector).each(function(index, element))

参数：

• selector: 必需，被查找的元素
• function(index, element): 可选，指定要执行的函数，其中 index 表示元素索引，element 表示当前元素

示例：

<div class="container">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
    <p>paragraph text</p>
</div>

$('.container li').each(function(index, element) { // 遍历所有 li 元素，并输出它们的文本内容
    console.log($(this).text());
});

结合 find 方法使用

可以将 find 方法和 each 方法结合使用，遍历查找到的元素集合。

<div class="container">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
    <ul class="sub-container">
        <li>sub list item 1</li>
        <li>sub list item 2</li>
        <li>sub list item 3</li>
    </ul>
</div>

$('.container').find('li').each(function(index, element) { // 遍历所有 li 元素，并输出它们的文本内容
    console.log($(this).text());
});