Question

动态构建Html块，其中一些元素具有属性input-readonly-container。我需要选择不在sub 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]和内部元素（5,6）的子容器。

选择应该在根元素的上下文中进行。

var root=$('#root');
$('selectorHere', root);

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

如果孩子没有[input-readonly-container]，选择应该选择所有子元素（7,8）

如果我使用root = $（＆＃39;＃child＆＃39;）运行相同的选择器，则应该只选择id = 5,6

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

Answer 1

试试这个：

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

Answer 2

$("div[input-readonly-container]:first > input")

您可以使用后代选择器来避免使用大子元素。

:first选择包含属性input-readonly-only

的文档的第一个元素div

> input只选择div中的后代：first。

Answer 3

使用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>

jQuery代码

var listItems = jQuery('.jquery-selector');

使用数字启动id也是不好的做法。

尽量保持代码简单易读。

Answer 4

过滤div的孩子们，请看这里的js小提琴， https://jsfiddle.net/rahulpandey034/xot37hrd/

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

如何在jquery选择器中跳过子节点

4 个答案: