jQuery 遍历 - 同胞(siblings)

jQuery 的遍历方法可以帮助开发者在页面中选择和操作元素。其中，同胞选择器（siblings selector）是 jQuery 遍历方法之一，可以选择当前元素的所有同胞元素，即与当前元素在同一级别的所有元素。

基本用法

使用 siblings() 方法可以选取当前元素的所有同胞元素。以下是基本用法：

$(selector).siblings(filter)

其中，selector 参数表示要选择的元素，filter 是可选的参数，表示要筛选的条件。

过滤器

在同胞选择器中可以使用过滤器来筛选选取到的同胞元素。以下是常用的同胞选择器过滤器：

:first：选取第一个同胞元素
:last：选取最后一个同胞元素
:even：选取偶数位置的同胞元素
:odd：选取奇数位置的同胞元素
:eq(index)：选取索引为 index 的同胞元素
:gt(index)：选取索引大于 index 的同胞元素
:lt(index)：选取索引小于 index 的同胞元素

示例代码

以下是一个示例代码，演示如何使用同胞选择器选择某个元素的所有同胞元素，并对其进行操作。

<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(this).siblings().css("color", "red");
            });
        });
    </script>
</head>
<body>
    <h2>同胞选择器示例代码</h2>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
        <li>列表项 4</li>
        <li>列表项 5</li>
    </ul>
    <button>选择同胞元素</button>
</body>
</html>

这段代码演示了一个简单的页面，点击按钮可以选取当前按钮（即“选择同胞元素”按钮）的所有同胞元素，并将它们的颜色设为红色。

总结

同胞选择器是 jQuery 遍历方法中十分实用的一种方式，可以帮助开发者快速获取当前元素在同一层级中的所有元素。在使用同胞选择器时，可以借助过滤器来对选取到的元素进行筛选和操作，更方便地对页面元素进行管理和控制。

jQuery 遍历 jQuery 遍历 - 后代