如何使用 jQuery 选择同级元素？答案

【问题标题】：How do I select a sibling element using jQuery?如何使用 jQuery 选择同级元素？
【发布时间】：2011-11-19 18:22:22
【问题描述】：

你能帮我看看这个 jQuery 选择器吗？

$(".auctiondiv .auctiondivleftcontainer .countdown").each(function () {
    var newValue = parseInt($(this).text(), 10) - 1;
    $(this).text(newValue);

    if (newValue == 0) {
        $(this).parent().fadeOut();
        chat.verify($(this).parent().parent().attr('id'));
    }
});

基本上，我想在每个循环中选择与 .countdown 属于同一父级的 .bidbutton 类的元素：

<div class="auctiondivleftcontainer">
    <p class="countdown">0</p>
    <button class="btn primary bidbutton">Lance</button>                            
</div>

然后将其应用于该按钮：

$(button here).addClass("disabled");
$(button here).attr("disabled", "");

【问题讨论】：

标签： jquery selector

【解决方案1】：

使用 jQuery .siblings() 选择匹配的兄弟。

$(this).siblings('.bidbutton');

【讨论】：

Siblings() 返回与所述选择器匹配的所有元素的数组。
如何获得所有兄弟姐妹，但不是这个？

【解决方案2】：

$(this).siblings(".bidbutton")

【讨论】：

【解决方案3】：

$("h2").siblings().css({"color": "blue"});

【讨论】：

【解决方案4】：

you can use 
$(this).siblings(".bidbutton").addClass("disabled");
$(this).siblings(".bidbutton").attr("disabled","");

【讨论】：

【解决方案5】：

$("selector").nextAll(); 
$("selector").prev();

您还可以使用 Jquery 选择器查找元素

$("h2").siblings('table').find('tr');

【讨论】：

【解决方案6】：

您可以使用 jQuery 选择同级元素

 <script type="text/javascript">
    $(document).ready(function(){
        $("selector").siblings().addClass("classname");
    });
 </script>

Demo here

【讨论】：

【解决方案7】：

如果你想选择一个特定的兄弟：

var $sibling = $(this).siblings('.bidbutton')[index];

其中 'index' 是父容器中特定同级的索引。

【讨论】：

只有在您提前知道索引时才有用。

【解决方案8】：

由于$(this) 指的是.countdown，因此您可以更具体地使用$(this).next() 或$(this).next('button')。

【讨论】：

如果它不在他身边怎么办？如果它在他身后呢？使用更通用的兄弟解决方案。
令人惊讶的是，它存在于他提供的 DOM 中，如果他不需要，就没有理由遍历所有兄弟姐妹。

【解决方案9】：

试试 -

   $(this).siblings(".bidbutton").addClass("disabled").attr("disabled", "");

【讨论】：

【解决方案10】：

如果你需要选择一个有名字而不是类的兄弟，你可以使用下面的

var $sibling = $(this).siblings('input[name=bidbutton]');

【讨论】：

【解决方案11】：

如果我理解正确，您已经处于循环中（每个），那么您总是希望在每个循环运行中选择一个同级按钮？由于 siblings() 返回一个数组，这将是要走的路：

$(this).siblings('.bidbutton')[0]

你可以在一行中应用你想要的两个东西：

$(this).siblings('.bidbutton')[0].addClass("disabled").attr("disabled", "");

【讨论】：