Question

我想知道我如何addClass来自li的最远的父母，我试过这个并且它工作正常但是我觉得这是一个错误的逻辑，不是吗？

$('li').each(function() {
  $(this).click(function() {
    $(this).parent().parent().parent().parent().parent().parent().addClass('myClass');
  });
});

.myClass {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> <!-- I want to add class to this parent -->
  <div>
    <div>
      <div>
        <div>
          <ul>
            <li><a>Click</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

我希望像closest()那样适用于children，是否有办法访问大parent？在这个例子中，我被迫写了parent()六次！

Answer 1

在元素的所有.last()中获取.parents()。

＆＃13;

$('li').each(function() {
  $(this).click(function() {
    $(this).parents('div').last().addClass('myClass');
  });
});

＆＃13;

.myClass {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> <!-- I want to add class to this parent -->
  <div>
    <div>
      <div>
        <div>
          <ul>
            <li><a>Click</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

使用$(this).parents([optional]).eq(n)

更新：

以下是我们console.log($(this).parents())和console.log($(this).parents('div'))的一些属性，.eq(n)的灵活性可能不是每次我们想要最外面的那个：

$（本）。家长（）

{
  "0": <ul>…</ul>,
  "1": <div>…</div>,
  "2": <div>…</div>,
  "3": <div>…</div>,
  "4": <div>…</div>,
  "5": <div class="myClass">…</div>,
  "6": <body>…</body>,
  "7": <html>…</html>,
  "length": 8,
  ...

$（本）。家长（＆＃39; DIV＆＃39）

{
  "0": <div>…</div>,
  "1": <div>…</div>,
  "2": <div>…</div>,
  "3": <div>…</div>,
  "4": <div class="myClass">…</div>,
  "length": 5,
 ...

＆＃13;

$('li').each(function() {
  $(this).click(function() {
     $(this).parents().eq(5).addClass('myClass');
     // Or 
     // $(this).parents('div').eq(4).addClass('myClass');
     console.log($(this).parents('div'));
  });
});

＆＃13;

.myClass {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> <!-- I want to add class to this parent -->
  <div>
    <div>
      <div>
        <div>
          <ul>
            <li><a>Click</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

访问最远的父母

2 个答案: