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

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

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

Javascript:

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

Как я могу ссылаться на: первый дочерний элемент элемента?

10 ответов


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

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

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

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

использовать children функции С :first селектор для получения один первый ребенок element:

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

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

дали, notif = $('#foo')

пути jQuery:

  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% медленнее

родной пути:

  1. JavaScript native'ele.firstChild - 4,934,323 ops / sec (все вышеуказанные подходы на 100% медленнее по сравнению с firstChild)
  2. родной дом эле из 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)

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

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

$(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


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

    $(element).first();

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

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

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