遍历每个兄弟元素答案

【问题标题】：Iterate over each sibling element遍历每个兄弟元素
【发布时间】：2013-08-10 14:05:29
【问题描述】：

背景： 我正在构建一个表单和脚本，它将基于单击特定按钮执行 ajax 查询。有多个具有相同类元素的div块，根据其中的div块，点击一个按钮，会处理不同的表单。

作为开始程序的一部分，我从一个看似简单的 jQuery 调用开始。

我正在尝试将 onclick 事件添加到特定类，然后尝试获取该元素的兄弟姐妹的 CSS 值。

错误： 我收到一条错误消息，指出 TypeError: this.siblings is undefined。

问题：使用 jQuery 迭代元素的兄弟姐妹的正确方法是什么？

我的代码：

HTML：

<a class="btn LiveStatsBtn"><span class="btn-label">Get Stats now</span> </a>

JavaScript：

$(document).ready (function()
{ 
    $('.LiveStatsBtn').click(function(){
        this.siblings.each( function () {
            var tx=this.css();
            alert(tx);
        });
    });
});

【问题讨论】：

标签： javascript jquery class selector

【解决方案1】：

在 jQuery 事件处理程序中，this 指的是 DOM 元素，而不是 jQuery 对象。你必须把它包装成一个：

$(this).siblings().each(function() {
  // ...
});

还要注意，“siblings”是一个函数，所以你必须调用它来获得一个新的 jQuery 对象来包装元素兄弟。

【讨论】：

【解决方案2】：

siblings是一个函数，所以需要括号：

$(document).ready (function()
{ 
    $('.LiveStatsBtn').click(function(){
        $(this).siblings().each( function () {
            var tx=$(this).css();
            alert(tx);
        });
    });
});

http://api.jquery.com/siblings/

【讨论】：