jquery selector에서 자식을 건너 뛰는 방법

Question

input-readonly-container 속성을 가진 일부 요소로 동적으로 Html 블록을 빌드합니다. 하위 입력 읽기 전용 컨테이너에없는 요소를 선택해야합니다.

<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 만 선택해야합니다.

아이가 [입력 - 읽기 전용 컨테이너를]이없는 경우, 선택은 모든 자식 요소를 선택한다 (7,8)

내가 ('# 아이') 루트 = $와 같은 선택을 실행하는 경우, 그것을 ID를 선택해야 = 선택기 5,6- 만

그래서 생각 특성 [입력 읽기 전용 컨테이너]

Answer 1

시도와 다른 요소의 자식 아니다 [입력 읽기 전용 컨테이너]와 용기의 요소를 선택 이 :

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

Answer 2

jQuery로 선택하려는 요소에 클래스를 추가하고 스크립트에서 단일 선택기를 사용하십시오.

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

<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 코드는 또한없는 것이 좋습니다 번호와 아이디의를 시작합니다.

가능한 한 간단하고 읽기 쉬운 코드로 유지하십시오.

Answer 3

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

당신은 그랜드 자식 요소를 방지하기 위해 후손 선택기를 사용할 수 있습니다. 첫째 :

:first 는 사업부 내에서만 후손을 선택하는 속성 input-readonly-only

> input을 포함하는 문서의 첫 번째 요소의 사업부를 선택합니다.

Answer 4

필터 사업부의 아이들이, https://jsfiddle.net/rahulpandey034/xot37hrd/

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