[javascript] “this”의 jQuery 첫 번째 자식

JAVASCRIPT / 글쓴이

클릭 한 범위에서 jQuery 함수로 “this”를 전달한 다음 클릭 한 요소의 첫 번째 자식에서 jQuery를 실행할 수 있습니다. 제대로 이해하지 못하는 것 같습니다 …

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

자바 스크립트 :

function toggleSection(element) {
  element.toggleClass("redClass");
}

: first-child of element를 어떻게 참조합니까?

답변

기존 jQuery 세트가 제공하는 컨텍스트에 선택기를 적용하려면 find () 함수를 시도하십시오 .

element.find(">:first-child").toggleClass("redClass");

Jørn Schou-Rode는 아마도 컨텍스트 요소 의 첫 번째 직계 자손 만을 찾고자 하므로 하위 선택기 (>)를 원한다고 언급했습니다 . 그는 또한 당신이 find ()와 매우 유사한 children () 함수 를 사용할 수 있지만 계층 구조에서 한 수준 깊게 만 검색합니다 (필요한 전부입니다).

element.children(":first").toggleClass("redClass");

답변

선택기 와 함께 children함수 를 사용하여 다음의 첫 번째 자식 하나 를 얻습니다 .:firstelement

element.children(":first").toggleClass("redClass");

답변

jsperf 테스트를 추가 하여 첫 번째 자녀 (총 1000 명 이상의 자녀)를 얻는 다른 접근법의 속도 차이를 확인했습니다.

주어진, notif = $('#foo')

jQuery 방법 :

  1. $(":first-child", notif) -4,304 ops / sec-가장 빠름
  2. notif.children(":first") -653 ops / sec-85 % 느림
  3. notif.children()[0] -1,416 ops / sec-67 % 느림

기본 방법 :

  1. 자바 스크립트 ‘기본 ele.firstChild– 4934323 OPS / 초 (위의 모든 접근 방식에 비해 100 % 느립니다 firstChild)
  2. jQery에서 기본 DOM의 ELE : notif[0].firstChild– 4913658 개 작전 / 초

따라서 첫 번째 jQuery 접근 방식은 적어도 첫 번째 자식에게는 권장되지 않습니다 (다른 많은 경우도 마찬가지입니다). jQuery 객체가 있고 첫 번째 자식을 가져와야하는 경우 배열 참조 (권장)를 사용하여 jQuery 객체에서 기본 DOM 요소 를 가져 오거나 를 사용하십시오 . 이는 일반적인 JavaScript 사용법과 동일한 결과를 제공합니다.[0] .get(0)ele.firstChild

모든 테스트는 Chrome Canary 빌드 v15.0.854.0에서 수행됩니다.

답변

element.children().first();

모든 아이들을 찾아서 먼저 얻으십시오.

답변

당신이 시도 했습니까

$(":first-child", element).toggleClass("redClass");

요소를 검색의 컨텍스트로 설정하고 싶다고 생각합니다. 다른 jQuery 전문가가 여기에 뛰어 들어 너를 버릴 수있는 더 좋은 방법이있을 수 있습니다 🙂

답변

방금 .firstElementChild가능한 경우 사용하는 플러그인을 작성했으며 필요한 경우 각 개별 노드를 반복 하는 플러그인으로 넘어갔습니다.

(function ($) {
    var useElementChild = ('firstElementChild' in document.createElement('div'));

    $.fn.firstChild = function () {
        return this.map(function() {
            if (useElementChild) {
                return this.firstElementChild;
            } else {
                var node = this.firstChild;
                while (node) {
                    if (node.type === 1) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }
        });
    };
})(jQuery);

순수한 DOM 솔루션만큼 빠르지는 않지만 Chrome 24의 jsperf 테스트 에서는 다른 jQuery 선택기 기반 방법보다 몇 배 빠릅니다.

답변

당신은 DOM을 사용할 수 있습니다

$(this).children().first()
// is equivalent to
$(this.firstChild)