Question

以下是我菜单的ul li格式

<li class="dropdown active list-unstyled clearfix">
       <a target="_self" href="/marine-offshore/en/worldwide/sustainability/"><span>Sustainability</span></a>
        <div class="dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs"></div></div>
    </li>
    <li class="dropdown active list-unstyled clearfix">
       <a target="_self" href="/marine-offshore/en/worldwide/sustainability/"><span>Sustainability</span></a>

    </li>

在上面的代码中，First LI有div class="dropdown-menu"。但对于第二个LI，我没有div class="dropdown-menu"附加div我使用了下面的代码，但是它会附加到li。

if( !$('.mainnavigation li.dropdown').hasClass('dropdown-menu') ) {
       $('.mainnavigation .dropdown').append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}

请帮我将div仅追加到第二个li。提前致谢

Answer 1

在您的javascript测试中，您正在测试LI元素是否具有“dropdown-menu”类。

您可以使用以下代码测试所需div的存在：

 $('.mainnavigation li.dropdown').each(function(){
   if($(this).children('.dropdown-menu').length == 0){
$(this).append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}
});

演示：http://jsfiddle.net/gxnnwy3r/

Answer 2

以jQuery方式访问第二个元素。

if( !$('.mainnavigation li.dropdown').eq(1).hasClass('dropdown-menu') ) {
       $('.mainnavigation .dropdown').eq(1).append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}

Answer 3

您可以访问直接的第二个元素，如：

USE eq（）函数。

$('.mainnavigation .dropdown').eq(1).append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");

Answer 4

你需要这样做：

if($('.mainnavigation li.dropdown .dropdown-menu').length === 0 ) {
     $('.mainnavigation .dropdown').append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}

它会检查.mainnavigation li.dropdown是否包含.dropdown-menu等元素，length 0是否{em>（表示没有元素）然后加入。

如果该类不存在，则将div动态附加到li

4 个答案: