javascript bubble - jQuery первый ребенок из "this"




stoppropagation bind (9)

Ты пытался

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

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

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

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

Javascript:

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

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


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

    $(element).first();

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

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

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


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


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

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

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

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


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

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

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

Используйте функцию children с помощью :first selector, чтобы получить единственный первый 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. Родной DOM ele из jQery: notif[0].firstChild - 4 913 notif[0].firstChild оп / сек

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

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


Этот пример для кнопки.

Попробуйте следующее:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});




javascript jquery jquery-selectors css-selectors