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:
-
$(":first-child", notif)
- 4,304 ops / sec-самый быстрый -
notif.children(":first")
- 653 ops / sec-85% медленнее -
notif.children()[0]
- 1,416 ops / sec-67% медленнее
родной пути:
- JavaScript native'
ele.firstChild
- 4,934,323 ops / sec (все вышеуказанные подходы на 100% медленнее по сравнению сfirstChild
) - родной дом эле из 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
ты пробовал
$(":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.
пожалуйста, используйте его, как это во-первых, дайте имя класса, чтобы пометить 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/