jQuery перша дитина "цього"

Я намагаюсь передати "це" від натиснутого проміжку до функції jQuery, яка може потім виконати jQuery на першому дочірнім елементі цього клацання. Не можу, здається, все правильно ...

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

Javascript:

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

Як я можу посилатись на: первістка елемента?

Якщо ви хочете застосувати селектор до контексту, наданого наявним набором jQuery, спробуйте функцію find () :

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

Джорн Шоу-Роде зазначив, що ви, мабуть, хочете знайти лише першого прямого нащадка елемента контексту, отже, добірника (>). Він також вказує, що ви можете так само добре використовувати функцію дітей () , яка дуже схожа на пошук (), але здійснює пошук лише на рівні рівня в ієрархії (що все, що вам потрібно ...):

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

Використовуйте childrenфункцію разом із :firstселектором, щоб отримати одиноку першу дитину element:

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

Я додав тест jsperf, щоб побачити різницю швидкості для різних підходів, щоб отримати першу дитину (всього 1000+ дітей)

дано, notif = $('#foo')

Способи jQuery:

1. $(":first-child", notif) - 4 304 Оп / сек - найшвидший
2. notif.children(":first") - 653 ops / sec - на 85% повільніше
3. notif.children()[0] - 1416 ops / sec - 67% повільніше

Рідні способи:

4. JavaScript native ' ele.firstChild- 4,934,323 ops / sec (всі вищезазначені підходи на 100% повільніше порівняно з firstChild)
5. Рідний DOM ele від jQery: notif[0].firstChild- 4,913,658 ops / sec

Отже, перші 3 підходи jQuery не рекомендуються, принаймні для першої дитини (я сумніваюся, що це було б і з багатьма іншими). Якщо у вас є об'єкт jQuery і вам потрібно отримати первістка, то отримайте нативний елемент DOM від об’єкта jQuery, використовуючи посилання масиву [0] (рекомендовано) або .get(0)скористайтеся ele.firstChild. Це дає такі ж ідентичні результати, що і звичайне використання JavaScript.

всі тести виконуються в Chrome Canary build 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, але в тестах jsperf під Chrome 24 це було на пару порядків швидше, ніж будь-який інший метод на основі селектора jQuery.

ви можете використовувати DOM

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

Це можна зробити за допомогою такої простої магії:

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

Довідка: http://www.snoopcode.com/jquery/jquery-first-child-selector

будь ласка, використовуйте його, як це перше, дайте ім'я класу, щоб тег p як "myp"

то на використання наступного коду

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

Якщо ви хочете негайно першої дитини вам потрібно

    $(element).first();

Якщо ви хочете певного першого елемента в домі від свого елемента, тоді використовуйте нижче

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

спробуйте: http://jsfiddle.net/vgGbc/2/