javascript - 如何将类应用于 jQuery 中的兄弟姐妹？

Question

好的，我有这个代码：

<li>
  <a href="#step-2" class="step-3-link selected">
    <span class="stepNumber">2</span>
  </a>
  <br />
  <br />
  <span class="sn2">Home Page Banner</span>
</li>

我需要做的是，如果 'li a' 选择了类，在这种情况下 step-3-link 确实如此，则应将具有类 'sn2' 的跨度添加一个类 'selected-span'。

我之前尝试过的代码如下：

$('.swMain ul.anchor li a.selected').siblings('span').addClass('selected-span');

我尝试了 .siblings、.find、.parent 等等，但没有成功。请指导我。

Answer 1

您可以只使用 CSS 2.1 的通用兄弟选择器而不使用 JS。

因此，不要添加另一个名为 的类selected-span，而是将所需的设置放在以下块中：

.step-3-link.selected ~ span.sn2 {
    /* enter custom settings here */
}

---

通用兄弟选择器

~ 组合符分隔两个选择器，并且仅当第二个元素在第一个元素之前时才匹配第二个元素，并且两者共享一个共同的父元素。

Answer 2

使用此代码，

if($('a').hasClass('selected')){
     $(this).parent().find('.sn2').addClass('selected-span');
}

Answer 3

如果我理解您正在尝试正确解决的问题，那么我会说您可能希望将一个selected类添加到单击a span并删除现有选择

$('li a').click(function(){
$('li a span').removeClass('selected');
$(this).find('span').addClass('selected');
});

Answer 4

小提琴 =)

查询：

$(document).ready(function() {
    $('li').each(function() {
        if($('a.selected').length) {
            $('.sn2', $(this)).addClass('selected-span');
        }
    });
});

Answer 5

您对关键字的使用非常接近next()，而是可以使用它nextAll来遍历您想要的位置：

JS：

if($('li a').hasClass('selected')){
    $('li a').nextAll('span:first').addClass('sn2 selected-span');
}

工作演示：http: //jsfiddle.net/9xUk4/2/

编辑：在 Itay 表示使用过next()多功能的愚蠢之后提供了一个替代解决方案。