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

dPatel1582

我正在尝试获取所选元素的第一个父元素(仅限),这些元素的输入类型为 Checkbox 作为一级后代。

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()”时,它给了我所有父母,包括“LI”没有复选框。

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

芜菁

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

>这里使用直接后代选择器 ( ):.parents("li:has(>input[type='checkbox'])")选择那些li有子 s 的 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery查找具有特定类前缀的第一个父元素

jQuery查找父元素以查找具有特定数据的第一个元素

从具有特定类的第一个输入中获取父表单元素

查找第一个可滚动的父级

CSS-查找第一个后代

PostgreSQL json路径表达式以查找具有特定键的第一个数组元素

jQuery函数查找具有ID的第一个元素

查找具有相同第一个元素的对的平均值。科特林

查找具有匹配日期分量的第一个日期时间元素的索引

在一行中查找具有特定值的第一个和最后一个条目

查找具有特定属性值的第一个节点

查找第一个父级并通过jQuery添加类

选择元素后具有特定类别的第一个兄弟姐妹

如何使用XPath选择具有特定属性的第一个元素

尝试获取具有特定日期值的第一个元素的标头

如果有任何重复,则选择具有特定属性的第一个元素,否则选择第一个元素

在 CSS 中选择具有特定类的序列的第一个和最后一个元素

计算 XSLT 中每个父级的不同第一个子值元素

是否有jQuery选择器/方法来向上一级查找特定的父元素?

在层次结构中查找第一个元素,而不是在子级中

检查除第一个元素外的所有元素是否都具有特定类

Capybara:使用 find 查找第一级元素

在Python中的numpy数组中查找具有条件的第一个元素的索引

CSS:仅针对父级中的第一个子元素 - 第一个类型不起作用

CodeceptJS中的I.click()选择器-如何查找具有特定innerHTML的第一个按钮

具有GridLayoutManager的RecyclerView和具有不同viewHolder的第一个元素

查找带有类的第一个元素,使用类追加标题元素

Mongo仅在数组的第一个元素具有特定字段值的情况下匹配

查找包含“-”的数组的第一个元素