1

我需要 jQuery 代码，我可以使用它来查找至少一个 div 的直接父级，而这些 divul又具有 3 个以上的元素。当div找到这样的一个，它应该添加类名target给它。

例如，如果我有以下 HTML 代码：

JSFiddle 这里：http: //jsfiddle.net/AvkY5/

<div class="main">
  <div class="main_child_1">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
  <div class="main_child_2">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
  <div class="main_child_3">
    <p>Lorem Ipsum</p>
  </div>
  <div class="main_child_4">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
    <div class="main_child_4_child_1">
      <p>Lorem Ipsum</p>
    </div>
    <div class="main_child_4_child_2">
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </div>
  </div>
  <div class="main_child_5">
    <p>Lorem Ipsum</p>
    <div class="main_child_5_child_1">
      <p>Lorem Ipsum</p>
    </div>
    <div class="main_child_5_child_2">
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </div>
  </div>
  <div class="main_child_6">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
    <div class="main_child_6_child_1">
      <p>Lorem Ipsum</p>
    </div>
    <div class="main_child_6_child_2">
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </div>
    <div class="main_child_6_child_3">
      <p>Lorem Ipsum</p>
    </div>
  </div>
</div>

然后在此代码中，应将以下 divtarget添加到其类名中：

  • main_child_2
  • main_child_4
  • main_child_5_child_2
  • main_child_6_child_2

什么 jQuery 代码可以实现这一点？

4

4 回答 4

3

怎么样

$("div").filter(function() {
    return $(this).children("ul li").length > 3;
}).addClass("target");
于 2013-09-24T14:37:03.970 回答
2

这将找到所有具有 ul 子元素的 div，具有超过 3 个子元素，并将类添加target到 div，而不是 ul 元素...

$(".main div > ul").filter(function() {
    return $(this).children().length > 3;
}).parent().addClass("target");

编辑：根据要求添加.main了课程。

于 2013-09-24T14:40:12.583 回答
2

在我看来，最好的方法是使用纯 css “nth-child property”。

快速优雅

一条线 ：

//(n+3) : 3 or more li
// (4) : more than 3
$( "ul li:nth-child(n+3)" ).closest("div").addClass( "target");

这里是JSfiddle

于 2013-09-24T14:46:43.577 回答
1

您可以使用 nth-child 来执行此操作：

    # There is probably a more elegant way to get to the div parent, 
    #but this should get you headed in the right direction
    $("div ul li:nth-child(4)").parent().parent().addClass("target")
于 2013-09-24T14:46:33.443 回答