Question

我有一个简单的清单：

<ol>
    <li><a href="#" class="on"> I'm on</a> </li>
    <li><a href="#"> I'm off</a> </li>
    <li><a href="#"> I'm off</a> </li>
</ol>

如果其中包含的<li>包含类<a>，我想将一个类应用于on。

IE：我想改变

<li><a href="#" class="on"> I'm on</a> </li>

到：

<li class="active"><a href="#" class="on"> I'm on</a> </li>

使用css有100种更好的方法可以做到这一点，但都涉及重构我设置的复杂滑块。如果我可以使用a.on影响其.parent()，我就会全力以赴。

小提琴：http://jsfiddle.net/saltcod/GY2qP/1/

Answer 1

这应该这样做：

$('a.on').parent('li').addClass('active');

http://jsfiddle.net/rdrsd/

Answer 2

if($('a').hasClass('on')) {
     $(this).parent().addClass('active');
}

Answer 3

如果有任何锚点，那么你在lis里面的所有锚点的父设置都是黄色的。

请改用：

//remove on states for all nav links
$("li a").removeClass("on");
$("li").removeClass("yellow");

//add on state to selected nav link
$(this).addClass("on");
$(this).parent().addClass('yellow');

Updated JS Fiddle

Answer 4

在你的小提琴中，将代码更改为

if ( $(this).hasClass('on') ){ 
    $(this).parent().addClass('yellow'); 
}

Answer 5

下面的内容应该可以解决问题，

修改：简化您的代码......

$("li a").click(function(e){

    //stop browser default
    e.preventDefault();

    //remove on states for all nav links
    $("li a").removeClass("on").parent().removeClass('yellow');

    //add on state to selected nav link
    $(this).addClass("on").parent().addClass('yellow');

});

DEMO

Answer 6

只需替换

行

$('li a').parent().addClass('yellow');

与

$(this).parent().addClass('yellow');

Answer 7

我认为这就是你要找的东西。

var $lis = $('li'),
    $links = $lis.children('a');

$links.click(function(e){

    //stop browser default
    e.preventDefault();

    var $this = $(this);

    //remove on states for all nav links
    $links.removeClass('on');
    $lis.removeClass('yellow');

    //add on state to selected nav link
    $this.addClass("on").parent().addClass('yellow');
});

http://jsfiddle.net/mattball/sQckP/

Answer 8

$("li a").click(function(e){

  //stop browser default
  e.preventDefault();

  //remove on states for all nav links
  $("li").removeClass("yellow");
  $("li a").removeClass("on");

  //add on state to selected nav link
  $(this).addClass("on");
  $(this).parent().addClass('yellow');

});

小提琴是here。

Answer 9

如果您点击class="yellow"，请在li上设置a。请勿向class="on"额外提供a。

http://jsfiddle.net/HerrSerker/GY2qP/8/

$("li a")
    .click(function(e) {
        //stop browser default
        e.preventDefault();

        //remove on states for all nav links
        $(this).parent().siblings().removeClass("yellow");

        //add on state to selected nav link
        $(this).parent().addClass("yellow");

    })
.end();

p {margin: 1em 0; } strong {font-weight: bold }

ol {width: 125px;background: #eee; }

li { padding: 10px; border-bottom: 1px solid;}

.yellow a {background: #ccc; }

.yellow {background: #ffff00;}

<ol>
    <li class="yellow"><a href="#"> A</a> </li>
    <li><a href="#"> B</a> </li>
    <li><a href="#"> C</a> </li>
</ol>

jQuery如果链接hasClass，则将类应用于其父级

9 个答案: