jquery "this"의 첫 번째 아이 쿼리

jquery "this"의 첫 번째 아이 쿼리

클릭된 스팬에서 jQuery 함수로 "this"를 전달하려고 합니다. jQuery 함수는 클릭된 요소의 첫 번째 아이에서 jQuery를 실행할 수 있습니다.제대로 된 것 같진 않은데...

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

Javascript:

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

요소의 first-child는 어떻게 참조합니까?

기존 jQuery 세트에 의해 제공되는 컨텍스트에 실렉터를 적용하는 경우 find() 함수를 사용해 보십시오.

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

Jörn Schou-Rode는 컨텍스트 요소의 첫 번째 직계 하위 항목, 즉 자녀 선택기(>)만 찾고 싶다고 지적했습니다.또한 children() 함수를 사용할 수도 있다고 지적합니다.이것은 find()와 매우 유사하지만 계층 내에서 한 단계만 검색합니다(필요한 것은 이것뿐입니다.

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

Selector와 함께 함수를 사용하여 단일 첫 번째 자식을 가져옵니다.element:

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

첫 번째 아이(총 1000명 이상의 아이)를 얻기 위한 다양한 접근 방식의 속도 차이를 확인하기 위해 jsperf 테스트를 추가했습니다.

정해진,notif = $('#foo')

j쿼리 방법:

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 % 느림

네이티브 방식:

4. JavaScript 네이티브'ele.firstChild- 4,934,323 ops/sec (상기 모든 접근 방식은 1초에 비해 100% 느림)firstChild)
5. jQuery의 네이티브 DOM ele:notif[0].firstChild- 4,913,658 ops/초

따라서 적어도 첫째 아이에게는 첫 번째 3개의 jQuery 접근법이 권장되지 않습니다(다른 많은 접근법도 마찬가지일 것 같지는 않습니다).jQuery 개체가 있고 첫 번째 아이를 가져올 필요가 있는 경우 어레이 참조를 사용하여 jQuery 개체에서 네이티브 DOM 요소를 가져옵니다.[0] (권장) 또는.get(0)를 사용합니다.ele.firstChild이는 일반적인 JavaScript 사용과 동일한 결과를 제공합니다.

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

element.children().first();

모든 아이들을 찾아서 먼저 데려와라.

해보셨어요?

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

검색 컨텍스트로 요소를 설정해야 할 것 같습니다.다른 jQuery guru가 여기에 뛰어들어 당신에게 던지는 더 좋은 방법이 있을지도 모릅니다.

DOM을 사용할 수 있습니다.

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

방금 플러그인을 작성했는데 이 플러그인은.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 selector 기반 방법보다 몇 배나 더 빨랐다.

myp처럼 p에 태그를 붙이기 위해 클래스 이름을 붙이는 것처럼 사용해 주세요.

그 후 다음 코드를 사용합니다.

$(document).ready(function() {
    $(".myp").click(function() {
        $(this).children(":first").toggleClass("classname"); // this will access the span.
    })
})

이것은 다음과 같은 간단한 마법으로 수행할 수 있습니다.

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

참고 자료: http://www.snoopcode.com/jquery/jquery-first-child-selector

사용하고 있다

 $('.txt').first().css('display', 'none');

첫 번째 아이가 필요한 경우

    $(element).first();

돔의 특정 첫 번째 요소를 요소에서 원하는 경우 다음을 사용하십시오.

    var spanElement = $(elementId).find(".redClass :first");
    $(spanElement).addClass("yourClassHere");

트라이얼 : http://jsfiddle.net/vgGbc/2/

언급URL : https://stackoverflow.com/questions/2275702/jquery-first-child-of-this