How to skip children in jquery selector

Question

There is dynamically build Html block with some elements having attribute input-readonly-container. I need to select elements which are not in 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>

In this sample I need to select only elements with Id 1,2,3,7,8. Child container with [input-readonly-container] and internal elements (5,6) should be skipped.

Selection should happen inside of context of root element.

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

and this should select only id=1,2,3,7,8.

If child doesn't have [input-readonly-container], selection should pick all children elements (7,8)

If I run same selector with root=$('#child'), it should select id=5,6 only

So idea of selector to select elements of container with [input-readonly-container] which are not children of another element with attribute [input-readonly-container]

`id`s should not start with numbers – depperm Aug 29 '16 at 18:20 — depperm, Aug 29 '16 at 18:20
it is just sample - pseudo code. thanks though.. – Vitaliy Markitanov Aug 29 '16 at 19:20 — Vitaliy Markitanov, Aug 29 '16 at 19:20

score 2 · Answer 1 · answered Aug 29 '16 at 18:22

2

Try this:

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

answered Aug 29 '16 at 18:22

jedifans

2,287
1
13
9

score 1 · Answer 2 · answered Aug 29 '16 at 18:50

1

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

You can use descendant selector to avoid grand child elements.

:first to select document's first element div containing attribute input-readonly-only

> input to select only descendants within div:first.

answered Aug 29 '16 at 18:50

ameenulla0007

2,663
1
12
15

"You can use descendant selector to avoid grand child elements." That's the opposite of what descendant means... – BoltClock Aug 30 '16 at 04:46
"> input to select only descendants within div:first." Yeah you definitely have it backwards. – BoltClock Aug 30 '16 at 04:47

Matthew Tilley · Answer 3 · 2016-08-29T18:54:20.473

0

Add a class to the elements you want to select with jQuery and use a single selector in your Script.

<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 code

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

Also its not good practice to start id's with numbers.

Try to keep code as simple and easy to read as possible.

edited Aug 29 '16 at 18:54

answered Aug 29 '16 at 18:44

Matthew Tilley

131
10

it may work too, but answer from jedifans is exactly what I need. Thanks – Vitaliy Markitanov Aug 29 '16 at 18:46

score 0 · Answer 4 · answered Aug 29 '16 at 19:48

0

Filter the childrens of the div, See the js fiddle here, https://jsfiddle.net/rahulpandey034/xot37hrd/

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

answered Aug 29 '16 at 19:48

Rahul Pandey

435
1
3
13

How to skip children in jquery selector

4 Answers4