一般兄弟选择器

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'。< / p>

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

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

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

Answer 1

你只能使用CSS 2.1的general sibling selector而不是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

The fiddle =)

JQUERY：

$(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()函数的愚蠢之后提供了另一种解决方案。

如何在jQuery中将类应用于兄弟姐妹？

5 个答案:

一般兄弟选择器