Найти первый родительский элемент с указанным c потомком первого уровня

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>

ПРИМЕЧАНИЕ. В этом коде я выделяю span только в качестве примера, но моя реальная цель иметь родительский элемент с флажком отличается.

Здесь при выборе флажка «LI8» мне нужен родитель, который имеет флажок. в соответствии с этим я должен получить «LI4», но когда я использую «.parents ()», он дает мне всех родителей, включая «LI», не имеющий флажка.

Кто-нибудь знает, как я могу получить только первого родителя у которого есть флажок как потомок первого уровня? В моем сценарии при выборе "LI8" должен возвращаться только "LI4", а "LI6" и "LI1" должны игнорироваться. Спасибо.

Answer 1

li:has(input[type='checkbox']) выберет все li s, которые содержат input на любом уровне .

. Используйте прямой селектор потомков (>) здесь: .parents("li:has(>input[type='checkbox'])") чтобы выбрать li s, у которых есть дочерний элемент input.

Вы можете ограничить выбор одним элементом, используя .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>