javascript - 查找具有特定第一级后代的第一个父元素

Question

我正在尝试获取将输入类型复选框作为第一级后代的选定元素的第一个父级(仅)。

HTML

$('input[type="checkbox"]').change(function(e) { 
  $(this)
    .parent()
    .parents("li:has(input[type='checkbox'])")
    .find(">span")
    .css("background-color", "yellow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="UL1">
    <li class="LI1">
      <input class="checkbox1" type="checkbox" />
      <span>LI1</span>
      <ul class="UL2">
        <li class="LI3">
          <input class="checkbox2" type="checkbox" />
          <span>LI3</span>
        </li>
        <li class="LI4">
          <input class="checkbox3" type="checkbox" />
          <span>LI4</span>
          <ul class="UL3">
            <li class="LI5">
              <span>LI5</span>
            </li>
            <li class="LI6">              
              <span>LI6</span>
              <ul class="UL4">
                <li class="LI7">
                  <span>LI7</span>
                </li>
                <li class="LI8">
                  <input class="checkbox4" type="checkbox" />
                  <span>LI8</span>
                </li>
                <li class="LI9">
                  <span>LI9</span>
                </li>
              </ul>
            </li>
            <li class="LI10">
              <span>LI10</span>
            </li>
          </ul>
        </li>
        <li class="LI11">
          <span>LI11</span>
        </li>
      </ul>
    </li>
    <li class="LI12">
      <input class="checkbox5" type="checkbox" />
      <span>LI12</span>
    </li>
  </ul>
</div>

注意:在这段代码中，我突出显示跨度只是作为示例，但我让父级带有复选框的实际目的是不同的。

在这里，当选择“LI8”复选框时，我需要其具有复选框的父级。根据此，我应该收到“LI4”，但是当我使用“.parents()”时。它给了我所有 parent ，包括“LI”，没有复选框。

有谁知道我怎样才能只获得具有复选框作为第一级后代的第一个 parent ？在我选择“LI8”的场景中，只有“LI4”应该返回，“LI6”和“LI1”必须忽略。谢谢。

Answer 1

li:has(input[type='checkbox']) 将选择包含 input 的所有 li 任何级别。。

在此处使用直接后代选择器 (>):.parents("li:has(>input[type='checkbox'])") 来选择这些具有子输入的li。

然后，您可以使用 .first() 将选择限制为单个元素。

$('input[type="checkbox"]').change(function(e) { 
  $(this)
    .parent()
    .parents("li:has(>input[type='checkbox'])")
    .first()
    .find(">span")
    .css("background-color", "yellow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="UL1">
    <li class="LI1">
      <input class="checkbox1" type="checkbox" />
      <span>LI1</span>
      <ul class="UL2">
        <li class="LI3">
          <input class="checkbox2" type="checkbox" />
          <span>LI3</span>
        </li>
        <li class="LI4">
          <input class="checkbox3" type="checkbox" />
          <span>LI4</span>
          <ul class="UL3">
            <li class="LI5">
              <span>LI5</span>
            </li>
            <li class="LI6">              
              <span>LI6</span>
              <ul class="UL4">
                <li class="LI7">
                  <span>LI7</span>
                </li>
                <li class="LI8">
                  <input class="checkbox4" type="checkbox" />
                  <span>LI8</span>
                </li>
                <li class="LI9">
                  <span>LI9</span>
                </li>
              </ul>
            </li>
            <li class="LI10">
              <span>LI10</span>
            </li>
          </ul>
        </li>
        <li class="LI11">
          <span>LI11</span>
        </li>
      </ul>
    </li>
    <li class="LI12">
      <input class="checkbox5" type="checkbox" />
      <span>LI12</span>
    </li>
  </ul>
</div>