[jquery] jquery에서 첫 번째 수준 요소 만 선택

Program / 글쓴이

<ul>이와 같은 목록 에서 부모의 링크 요소 만 선택하려면 어떻게 해야합니까?

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

그래서 css ul li a이지만ul li ul li a

감사

답변

$("ul > li a")

그러나 특별히 가장 바깥 쪽 ul을 대상으로하려면 루트 ul에 클래스를 설정해야합니다.

<ul class="rootlist">
...

다음은 다음과 같습니다.

$("ul.rootlist > li a")....

루트 li 요소 만 갖도록하는 또 다른 방법 :

$("ul > li a").not("ul li ul a")

칙칙해 보이지만 속임수를 써야합니다

답변

초기 ul 이 있으면 해당 요소의 직계 자식 만 고려하는 children () 메서드를 사용할 수 있습니다 . @activa가 지적했듯이 루트 요소를 쉽게 선택하는 한 가지 방법은 클래스 또는 ID를 제공하는 것입니다. 다음은 id가있는 루트 ul이 있다고 가정합니다 root.

$('ul#root').children('li');

답변

다른 답변에서 언급했듯이 가장 간단한 방법은 ID 또는 클래스 이름으로 루트 요소를 고유하게 식별하고 직계 하위 선택기를 사용하는 것입니다.

$('ul.topMenu > li > a')

그러나 DOM의 다양한 깊이 에서 이름이 지정되지 않은 요소 에서 작동하는 솔루션을 찾기 위해이 질문을 발견했습니다 .

이는 각 요소를 확인하고 일치하는 요소 목록에 부모가 없는지 확인하여 수행 할 수 있습니다. 다음은 jQuery 선택기 ‘최상위’로 래핑 된 내 솔루션 입니다.

jQuery.extend(jQuery.expr[':'], {
  topmost: function (e, index, match, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
        return false;
      }
    }
    return true;
  }
});

이를 활용하여 원본 게시물에 대한 솔루션은 다음과 같습니다.

$('ul:topmost > li > a')

// Or, more simply:
$('li:topmost > a')

여기에서 사용할 수있는 완전한 jsFiddle .

답변

간단히 사용할 수 있습니다 .. 

$("ul li a").click(function() {
  $(this).parent().find(">ul")...Something;
}

예를 참조하십시오 : https://codepen.io/gmkhussain/pen/XzjgRE

답변

결과가 여전히 하위로 흘러가는 경우이를 시도해 볼 수 있으며, 많은 경우 JQuery가 여전히 하위에 적용됩니다.

$("ul.rootlist > li > a")

이 방법 사용 : E> F 요소 E의 자식 인 모든 F 요소와 일치합니다.

JQuery에 명시 적 자식 만 찾도록 지시합니다.
http://www.w3.org/TR/CSS2/selector.html

답변

$("ul li:first-child")UL의 직계 하위 항목 만 가져 오는 데 사용할 수도 있습니다 .

동의합니다. 주 UL을 식별하려면 ID 또는 다른 것이 필요합니다. 그렇지 않으면 모두 선택됩니다. UL 주위에 ID가있는 div가있는 경우 가장 쉬운 방법은$("#someDiv > ul > li")

답변

이 시도:

$("#myId > UL > LI")