Đứa con đầu tiên của jQuery này

Tôi đang cố gắng chuyển "cái này" từ một khoảng được nhấp vào một hàm jQuery để có thể thực thi jQuery trên đứa con đầu tiên của phần tử được nhấp đó. Dường như không thể hiểu đúng ...

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

Javascript:

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

Làm thế nào để tôi tham khảo: con đầu tiên của yếu tố?

Nếu bạn muốn áp dụng bộ chọn cho ngữ cảnh được cung cấp bởi một bộ jQuery hiện có, hãy thử hàm find () :

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

Jørn Schou-Rode lưu ý rằng có lẽ bạn chỉ muốn tìm hậu duệ trực tiếp đầu tiên của thành phần bối cảnh, do đó bộ chọn con (>). Ông cũng chỉ ra rằng bạn cũng có thể sử dụng hàm children () , rất giống với find () nhưng chỉ tìm kiếm một cấp độ sâu trong cấu trúc phân cấp (đó là tất cả những gì bạn cần ...):

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

Sử dụng các childrenchức năng với :firstbộ chọn để có được những đơn đứa con đầu lòng của element:

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

Tôi đã thêm thử nghiệm jsperf để xem sự khác biệt về tốc độ cho các cách tiếp cận khác nhau để có được đứa con đầu tiên (tổng số hơn 1000 trẻ em)

được, notif = $('#foo')

Các cách của jQuery:

1. $(":first-child", notif) - 4.324 ops / giây - nhanh nhất
2. notif.children(":first") - 653 ops / giây - chậm hơn 85%
3. notif.children()[0] - 1,416 ops / giây - chậm hơn 67%

Cách bản địa:

4. JavaScript bản địa ' ele.firstChild- 4.934.323 ops / giây (tất cả các cách tiếp cận trên đều chậm hơn 100% so với firstChild)
5. Yêu tinh bản địa từ jQery: notif[0].firstChild- 4,913,658 ops / giây

Vì vậy, 3 cách tiếp cận jQuery đầu tiên không được khuyến nghị, ít nhất là đối với trẻ đầu tiên (tôi nghi ngờ đó cũng là trường hợp với nhiều phương pháp khác). Nếu bạn có một đối tượng jQuery và cần có con đầu tiên, thì hãy lấy phần tử DOM gốc từ đối tượng jQuery, sử dụng tham chiếu mảng [0] (được khuyến nghị) hoặc .get(0)sử dụng ele.firstChild. Điều này cho kết quả giống hệt như sử dụng JavaScript thông thường.

tất cả các thử nghiệm được thực hiện trong Chrome Canary build v15.0.854.0

element.children().first();

Tìm tất cả trẻ em và nhận được đầu tiên của họ.

Bạn đã thử chưa

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

Tôi nghĩ rằng bạn muốn đặt yếu tố của bạn làm bối cảnh cho tìm kiếm của bạn. Có thể có một cách tốt hơn để làm điều này mà một số guru jQuery khác sẽ nhảy vào đây và ném ra cho bạn :)

Tôi vừa mới viết một plugin sử dụng .firstElementChildnếu có thể và quay lại lặp lại qua từng nút riêng lẻ nếu cần:

(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);

Nó không nhanh như một giải pháp DOM thuần túy, nhưng trong các thử nghiệm jsperf trong Chrome 24, nó nhanh hơn một vài bậc so với bất kỳ phương thức dựa trên bộ chọn jQuery nào khác.

bạn có thể sử dụng DOM

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

Điều này có thể được thực hiện với một phép thuật đơn giản như thế này:

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

Tham khảo: http://www.snoopcode.com/jquery/jquery-first-child-selector

vui lòng sử dụng nó như thế này, điều đầu tiên đặt tên lớp để gắn thẻ p như "myp"

sau đó sử dụng đoạn mã sau

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

Nếu bạn muốn có con đầu lòng ngay lập tức bạn cần

    $(element).first();

Nếu bạn muốn phần tử đầu tiên cụ thể trong dom từ phần tử của bạn thì hãy sử dụng bên dưới

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

dùng thử: http://jsfiddle.net/vgGbc/2/