Question

我尝试做的是将类.div-initial添加到具有.nav-content-wrap类的div中，如果它包含小于或等于一个UL。问题是它将类.div-initial添加到所有其他div而不仅仅是最近的div。

这是我的HTML：

<ul id="nav">
   <li><a href="./">Government</a></li>
   <li><a href="./">Community</a>
      <div class="nav-content-wrap">
         <ul>
            <li><span>Dropdown header here</span></li>
            <li><a href="./">Dropdown link</a></li>
            <li><a href="./">Dropdown link</a></li>
            <li><a href="./">Dropdown link</a></li>
            <li><a href="./">Dropdown link</a></li>
            <li><a href="./">Dropdown link</a></li>
         </ul>
      </div>
   </li>
   <li><a href="./">Visitors</a></li>
   <li><a href="./">Business</a></li>
   <li><a href="./">How Do I...?</a></li>
</ul><!-- /#nav -->

我的jQuery代码是：

if($('.nav-content-wrap ul').length <= 1){
   $(this).addClass('div-initial');
}

另外，如果有多个<div class="col-md-6"></div>，我如何用div <div class="col-md-12"></div>包裹所有UL，如果只有一个，则用if($('#nav ul').length >= 1){ $(this).find('ul').wrap('<div class="col-md-6"></div>'); }包裹它。

我尝试使用此代码，但它没有用。它似乎是在我的文档中选择所有UL。

for_each_member

Answer 1

this的值未按您认为的那样设置，因为您在使用它时不在jQuery回调函数中。 if条件不会为后面的代码设置它。

而是这样做：

if($('.nav-content-wrap ul').length <= 1){
   $('.nav-content-wrap').addClass('div-initial');
}

如果您的网页上有div个nav-content-wrap个div，那么上述内容就不够好了，因为每个$('.nav-content-wrap').each(function() { if ($(this).find('ul').length <= 1) { $(this).addClass('anything'); } });的情况可能会有所不同。在这种情况下循环这些元素：

ul

...并使用div s包裹$('.nav-content-wrap').each(function() { var $lists = $(this).find('ul'); if ($lists.length.length <= 1) { $(this).addClass('anything'); $lists.wrap('<div class="col-md-6">'); } else { $lists.wrap('<div class="col-md-12">'); } });元素的代码扩展：

/controller/action/id

Answer 2

对于每个匹配的ul，获取最接近的nav-content-wrap并添加div-initial类。

   $('.nav-content-wrap ul').each(function(i, obj){
        // <ul> found, so get the parent
        var $parent = $(obj).closest('.nav-content-wrap');
        // Then search for child ul
        var $ULs = $parent.find('ul');
        if($ULs.length <=1)
            // Add your class to it
            $parent.addClass('div-initial');
        // Wrap them and assign 6 or 12 depending on the number of children
        $ULs.wrap('<div class="col-md-' + ($ULs.length > 1 ? 6 : 12) + '">');
    });

Answer 3

您的第一个jQuery代码正在寻找ul内的所有nav-content-wrap元素，如果它找到＆lt; = 1，那么它会尝试将类添加到$(this)。在这种情况下，$(this)可能不是您所期望的，除非您的代码块包含在另一个jQuery语句中。

您可以做的是分别查看每个nav-content-wrap并查看每个ul元素的数量，并根据需要添加div-initial类。

div中的换行可以使用jQuery .wrap方法在同一区域中处理。

$('.nav-content-wrap').each(function(i, item){
  var ulChildren = $(item).children('ul');
  if(ulChildren.length <= 1){
    $(this).addClass('div-initial');
    ulChildren.wrap('<div class="col-md-12"></div>');
  }else{
    ulChildren.wrap('<div class="col-md-6"></div>');
  }
});

.each函数是jQuery的一部分，它用于遍历项集合，在这种情况下，它将遍历所有具有类nav-content-wrap的元素。

使用.each时，i是一个迭代变量，它将从0开始，每次循环计数一次。 item是实际的nav-content-wrap元素。

jQuery最接近的方法不起作用

3 个答案: