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

Йорн Шу-Роде отметил, что вы, вероятно, захотите найти только первого прямого потомка элемента контекста, отсюда и дочерний селектор (>). Он также указывает, что вы также можете использовать функцию children () , которая очень похожа на функцию find (), но ищет только один уровень глубоко в иерархии (это все, что вам нужно ...):

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

Используйте childrenфункцию с :firstселектором, чтобы получить единственный первый потомок element:

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

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

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

JQuery способы:

1. $(":first-child", notif) - 4304 операций в секунду - самый быстрый
2. notif.children(":first") - 653 операции в секунду - на 85% медленнее
3. notif.children()[0] - 1416 операций в секунду - на 67% медленнее

Родные способы:

4. JavaScript native ' ele.firstChild- 4934323 операций в секунду (все вышеперечисленные подходы на 100% медленнее по сравнению с firstChild)
5. Собственный DOM ele от jQery: notif[0].firstChild- 4,913,658 операций в секунду

Итак, первые 3 подхода jQuery не рекомендуются, по крайней мере, для первого ребенка (я сомневаюсь, что это будет иметь место и со многими другими). Если у вас есть объект jQuery и вам нужно получить first-child, то получите нативный элемент 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();

Если вы хотите конкретный первый элемент в dom от вашего элемента, используйте ниже

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

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