如何在jquery选择器中跳过子项

有一个动态构建的Html块，其中一些元素具有属性input readonly container。我需要选择不在子输入只读容器中的元素

<div id='root' input-readonly-container>
    <input id='1' type="text" />
    <input id='2' type="text" />
    <input id='3' type="button" value="Btn"/>
    <div id="child1" input-readonly-container>
        <input id='5' type="text"/>
        <input id='6' type="text"/>
    </div>
    <div id="child2">
        <input id='7' type="text"/>
        <input id='8' type="text"/>
    </div>

</div>

这应该只选择id=1,2,3,7,8

如果子元素没有[input readonly container]，则选择应选择所有子元素7,8

如果我使用root=$‘child’运行相同的选择器，它应该只选择id=5,6

因此，使用选择器选择具有[input readonly container]的容器的元素，这些元素不是具有属性[input readonly container]的另一个元素的子元素。

尝试以下操作：

jQuery('div[input-readonly-container]:first').children().not('[input-readonly-container]')

试试这个：

jQuery('div[input-readonly-container]:first').children().not('[input-readonly-container]')

---

向要使用jQuery选择的元素添加一个类，并在脚本中使用单个选择器

<div input-readonly-container>
<input id='1' type="text" class="jquery-selector"/>
<input id='2' type="text" class="jquery-selector"/>
<input id='3' type="button" value="Btn" class="jquery-selector"/>
    <div id="child">
        <input id='5' type="text"/>
        <input id='6' type="text"/>
    </div>
</div>

同样，以数字开始id也不是一个好的做法

---

尽量使代码简单易读

向要使用jQuery选择的元素添加一个类，并在脚本中使用单个选择器

<div input-readonly-container>
<input id='1' type="text" class="jquery-selector"/>
<input id='2' type="text" class="jquery-selector"/>
<input id='3' type="button" value="Btn" class="jquery-selector"/>
    <div id="child">
        <input id='5' type="text"/>
        <input id='6' type="text"/>
    </div>
</div>

同样，以数字开始id也不是一个好的做法

尽量使代码简单易读

$div[输入只读容器]：第一个>输入

---

您可以使用子体选择器来避免大的子元素

：首先选择包含属性input readonly的文档的第一个元素div

---

>input仅选择div内的子体：first。

$div[input readonly container]：first>input

---

您可以使用子体选择器来避免大的子元素

：首先选择包含属性input readonly的文档的第一个元素div

---

>输入仅选择div中的子代：first。

筛选div的子代，请参见此处的js FIDLE，

---

过滤div的孩子们，看看这里的js小提琴，

---

ids不应该以numbersit开头，它只是示例伪代码。不过谢谢..ids不应该以numbersit开头，它只是一个示例伪代码。谢谢，也许也行，但绝地迷们的回答正是我需要的。谢谢也许也行，但绝地迷们的回答正是我所需要的。感谢您可以使用子代选择器来避免大的子元素。这与后代的含义相反…>输入仅选择div:first中的后代。是的，你肯定是反向的。你可以使用后代选择器来避免孙子元素。这与后代的含义相反…>输入仅选择div:first中的后代。是的，你肯定是倒过来的。

$(document).ready(function(){
    $("div[input-readonly-container]:first > input").css({"color": "red", "border": "2px solid red"});
});