1

少なくとも 1 つの の直接の親である div を見つけるために使用できる jQuery コードが必要です。これにはul3 つ以上の要素があります。そのような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>

次に、このコードでは、次の div をtargetクラス名に追加する必要があります。

  • main_child_2
  • main_child_4
  • main_child_5_child_2
  • main_child_6_child_2

これを達成できるjQueryコードは何ですか?

4

4 に答える 4

2

これにより、3 つ以上の子要素を持つ ul 子を持つすべてtargetの div が検索され、クラスが ul 要素ではなく div に追加されます...

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

編集：.main要求に応じて、クラスを追加しました。

于 2013-09-24T14:40:12.583 に答える
2

私の意見では、純粋な css の「nth-child プロパティ」を使用するのが最善の方法です。

速くてエレガント

1 行 :

//(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 に答える