如果parent li hasclass将class附加到child元素

时间:2014-07-03 23:53:58

标签: javascript jquery

我正在尝试将一个名为“animated”的类添加到子div中,只有当父li有一个名为“current”的类时。另外,如果父李没有显示“当前”类,我正在尝试删除“动画”类。

$(document).ready(function() {
if ($('ul.itemwrap li').hasClass('current')) {
   $( "ul.itemwrap li" ).find( ".caption-text" ).addClass("animated"); 
    }
else { 
$( "ul.itemwrap li" ).find( ".caption-text" ).removeClass( "animated" );
    }
});

问题* 代码工作,但是,它只是将类添加到所有子(.caption-text)元素,并且在整个轮播循环中添加和删除“当前”类时不删除它们。

HTML * <ul class="itemwrap"> <li class="current"> <img src="images/img1.jpg" alt="img-description"> <div class="caption"> <div class="caption-holder"> <div class="container"> <div class="caption-text"> <h1>title</h1> </div> </div> </div> </div> </li> <li> <img src="images/img2.jpg" alt="img-description"> <div class="caption"> <div class="caption-holder"> <div class="container"> <div class="caption-text"> <h1>Title</h1> </div> </div> </div> </div> </li> <li> <img src="images/img3.jpg" alt="img-description"> <div class="caption"> <div class="caption-holder "> <div class="container"> <div class="caption-text"> <h1>Title></h1> </div> </div> </div> </div> </li> </ul>

1 个答案:

答案 0 :(得分:0)

您的代码存在的问题是,如果一个<li>拥有类'current',那么您将动画添加到所有".caption-text"元素的类,而不仅仅是以下的元素'.current'项目。

您可以通过几种方式修复代码。这种方式可以单独处理每个<li>

$(document).ready(function() {
    $('ul.itemwrap li').each(function() {
        var item = $(this);
        var caption = item.find(".caption-text");
        if (item.hasClass('current')) {
            caption.addClass("animated");
        } else {
            caption.removeClass("animated");
        }
    });
});

这种方式使用选择器为您完成更多工作:

$(document).ready(function() {
    // clear .animated from all captions
    $('ul.itemwrap li .caption-text').removeClass("animated");

    // put back the .animated under .current
    $('ul.itemwrap li.current .caption-text').addClass("animated");
});