jQuery: Пытаясь написать свой первый плагин, как я могу передать селектор в мой функционал? - PullRequest
Новая
       33

jQuery: Пытаясь написать свой первый плагин, как я могу передать селектор в мой функционал?

1 голос
/ 03 апреля 2010

Я пытаюсь начать писать несколько простых плагинов jQuery, и для моей первой попытки, если бы подумал, я бы написал что-то, что ничего не делает, кроме применения классов .first & .last к переданным элементам.

так, например, я хочу в конечном итоге быть в состоянии: 

$('li').firstnlast();

Так что в этой html-структуре: 

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
</ul>

это создаст следующее: 

<ul>
    <li class="first"></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<ul>
    <li class="first"></li>
    <li class="last"></li>
</ul>

В моем плагине я написал следующее: 

(function($) {

    $.fn.extend({
        firstnlast: function() {
            $(this)
                .first()
                .addClass('first')
                .end()
                .last()
                .addClass('last');
        }
    });
})(jQuery);

Однако вышесказанное возвращает только это: 

<ul>
    <li class="first"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li class="last"></li>
</ul>

Кажется, что, передавая в функцию только li, она будет просматривать все элементы li на всей странице и затем применять к ней классы.

Что мне нужно выяснить, так это то, как я могу в основном сделать функцию «осведомленной о контексте», чтобы передача вышеупомянутого li в функцию применила бы классы к этим li s внутри родительского ul, не до первого и последнего li на всей странице.

Любые советы, идеи и помощь будут высоко оценены.

Ответы [ 2 ]

3 голосов
/ 03 апреля 2010

Вы хотите использовать :first-child и :last-child, чтобы получить здесь эти <li>, например: 

this.filter(':first-child:not(:last-child)').addClass('first')
    .end().filter(':last-child:not(:first-child)').addClass('last');

Получает первый и последний по отношению к родителю , который, кажется, то, что вы ищете, попробуйте:)

Обновлено: Теперь обрабатывает регистр 1 <li> внутри <ul>, эти элементы будут игнорироваться.

0 голосов
/ 03 апреля 2010 
(function($) {

    $.fn.extend({
        firstnlast: function() {
            $(this).parent()
                .find("li:eq(0)")
                .addClass('first')
                .end()
                .find("li:eq(-1)")
                .addClass('last');
        }
    });
})(jQuery);
...