it-swarm.com.ru

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

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

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

Javascript:

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

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

295
macca1

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

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

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

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

Используйте children function с :first selector , чтобы получить единственный первый дочерний элемент element:

element.children(":first").toggleClass("redClass");
69
Jørn Schou-Rode

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

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

jQuery пути:

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

Родные пути:

  1. Собственный JavaScript 'ele.firstChild - 4 934 323 операций в секунду (все вышеописанные подходы на 100% медленнее по сравнению с firstChild)
  2. Собственный 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

49
manikanta
element.children().first();

Найти всех детей и получить первым из них.

13
Bishal Paudel

Ты пытался

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

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

9
theIV

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

4
Alnitak

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

$(this).children().first()
// is equivalent to
$(this.firstChild)
2
Yukulélé

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

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

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

2
Prabhakar

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

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

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