jQuery遍历含有某个属性值的元素|极客教程

jQuery遍历含有某个属性值的元素

在使用jQuery操作DOM元素时，经常需要根据元素的属性值来选择特定的元素进行操作。本文将详细介绍如何使用jQuery来遍历含有某个属性值的元素，并给出具体示例。

1. 使用属性选择器

jQuery提供了属性选择器[attribute=value]来选择具有特定属性值的元素。我们可以结合遍历方法来实现遍历含有某个属性值的元素。

1.1. each方法遍历

each方法是jQuery中最常用的遍历方法，可以用来遍历匹配元素集合中的每个元素，并对每个元素执行指定的操作。

下面是使用each方法遍历含有data-id="1"属性值的元素的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery遍历含有某个属性值的元素</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li data-id="1">Item 1</li>
        <li data-id="2">Item 2</li>
        <li data-id="1">Item 3</li>
        <li data-id="3">Item 4</li>
    </ul>

    <script>
         $(document).ready(function(){$ ("li[data-id='1']").each(function(){
                console.log($(this).text());
            });
        });
    </script>
</body>
</html>

在上面的示例中，我们使用$("li[data-id='1']")选择所有含有data-id="1"属性值的li元素，然后使用each方法遍历这些元素，并输出它们的文本内容。

运行结果：

Item 1
Item 3

2. 使用filter方法

除了属性选择器，我们还可以使用filter方法来筛选具有特定属性值的元素。

下面是使用filter方法筛选含有data-id="1"属性值的元素的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery遍历含有某个属性值的元素</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li data-id="1">Item 1</li>
        <li data-id="2">Item 2</li>
        <li data-id="1">Item 3</li>
        <li data-id="3">Item 4</li>
    </ul>

    <script>
         $(document).ready(function(){$ ("li").filter("[data-id='1']").each(function(){
                console.log($(this).text());
            });
        });
    </script>
</body>
</html>

在上面的示例中，我们使用$("li").filter("[data-id='1']")选择所有li元素，然后使用filter方法筛选出含有data-id="1"属性值的元素，并进行遍历输出。