如果父元素li有class，将class附加到子元素

If parent li hasclass append class to child element

本文关键字：元素 class li 如果      更新时间：2023-09-26

我试图添加一个名为"animated"的类到子div只有当父li有一个名为"current"的类。此外，我试图删除"动画"类，如果父li不显示"当前"类。

$(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" );
    }
});

问题* 代码可以工作，但是，它只是将类添加到所有子元素(. title -text)中，并且在整个carousel循环中添加和删除"current"类时不删除它们。

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>

您的代码的一个问题是，如果一个<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");
});
相关文章：