jQuery первый ребенок "этого"

Question

Я пытаюсь передать "this" из диапазона, по которому щелкнули, в функцию jQuery, которая затем может выполнить jQuery для первого потомка этого элемента, по которому щелкнули. Кажется, не могу понять это правильно ...

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

Javascript:

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

Как мне сослаться на: first-child элемента?

Answer 1

Если вы хотите применить селектор к контексту, предоставленному существующим набором jQuery, попробуйте функцию find () :

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

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

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

Answer 2

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

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

Answer 3

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

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

jКвартиры:

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

Родные пути:

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

Итак, первые 3 подхода jQuery не рекомендуются, по крайней мере, для первого ребенка (я сомневаюсь, что это было бы и для многих других). Если у вас есть объект jQuery и вам нужно получить первого потомка, то получите собственный элемент DOM из объекта jQuery, используя ссылку на массив [0] (рекомендуется) или .get(0) и используйте ele.firstChild. Это дает те же результаты, что и при обычном использовании JavaScript.

все тесты выполняются в Chrome Canary build v15.0.854.0

Answer 4

element.children().first();

Найди всех детей и найди первого из них.

Answer 5

Вы пробовали

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

Я думаю, вы хотите установить свой элемент в качестве контекста для поиска. Возможно, есть лучший способ сделать это, и некоторые другие гуру jQuery подскажут вам:)

Answer 6

Я только что написал плагин, который использует .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.

Answer 7

вы можете использовать DOM

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

Answer 8

Это можно сделать с помощью простой магии, подобной этой:

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

Ссылка: http://www.snoopcode.com/jquery/jquery-first-child-selector

Answer 9

пожалуйста, используйте это так первым делом присвойте тегу имя класса, например "myp"

затем используйте следующий код

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

Answer 10

Если вы хотите немедленного первого ребенка, вам нужно

    $(element).first();

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

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

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