Выбор только одного элемента в коллекции jQuery

Как ограничить событие одним элементом в коллекции jQuery?

В приведенном ниже примере я попытался использовать .one(), чтобы ограничить поведение (вставляя строку <li class='close'>Close</li> HTML) в один экземпляр. Поведение действительно происходит только один раз, но для КАЖДОГО согласованного элемента $( "ul>li>a" ). Как это сделать только один раз, только ОДИН из согласованных элементов в коллекции?

Любые идеи?

$( "ul>li>a" ).one(
 "click",    
 function(){
  $( "ul ul")
  .prepend("<li class='close'>Close</li>")
 }
 );

Спасибо заранее.

-AS

Ответ 1

A jQuery выбор возвращает массив. Поэтому $("selection")[0] может работать. Однако для этого существуют более абстрактные методы, такие как .get(0) или .first() (в случае, если вы ищете первый элемент выбора/массива).

$( "selection" ). get (index) возвращает чистый элемент DOM (в этом конкретном индексе) выделения и не обернут в объект jQuery.

$( "selection" ). first() возвращает первый элемент выделения и переносит его в объект jQuery.

Итак, если вам не нужно возвращать элемент first, но все же хотите использовать функцию jQuery, вы можете сделать $($("selection").get(index)).

Учитывая вашу ситуацию, это должно работать нормально:

// bind the 'onclick' event only on the first element of the selection
$( "ul>li>a" ).first().click(function() {
    $( "ul ul").prepend("<li class='close'>Close</li>");
});

Что эквивалентно этому:

$($( "ul>li>a" ).get(0)).click(function() {
    $( "ul ul").prepend("<li class='close'>Close</li>");
});

И это:

$($( "ul>li>a" )[0]).click(function() {
    $( "ul ul").prepend("<li class='close'>Close</li>");
});

Я должен не соглашаться с Райаном, работая над строкой выбора CSS для фильтрации результата, довольно дорога по сравнению с функциональностью массива нативного JavaScript.

Ответ 2

Попробуйте first(), он выбирает первый элемент:

$( "ul>li>a" ).first().one('click',    
     function(){
        $( "ul ul").prepend("<li class='close'>Close</li>")
     }
 );

one() используется, как вы уже заметили, для обработки события только один раз.

Ответ 3

Вам нужно указать индекс элемента, с которым вы хотите работать.

Если ваш селектор возвращает более одного элемента, вы можете сделать одну из двух вещей... Вы можете выделить свои элементы, указав им атрибут класса или идентификатора в html и изменив селектор, чтобы выбрать только класс/идентификатор элемента /, который вы хотите выбрать, или вы можете указать индекс элемента, который вы пытаетесь работайте с. Более поздний метод немного неряшлив, но работает до тех пор, пока ваша структура страницы никогда не изменится.

Итак, для первого метода, о котором я говорил, вы изменили бы свой селектор на это после применения класса /id к вашим элементам:

$("ul>li>a.class")
or
$("ul>li>a#id")

Во втором методе, о котором я упомянул, вы измените свой селектор на это:

$("ul>li>a:eq(index)")

Где индекс - это индекс на основе нуля элемента, который вы пытаетесь выбрать.

Ответ 4

Вы можете вызвать метод first, который вернет новый объект jQuery, содержащий только первый элемент в исходном.

Однако в вашем случае вы можете использовать (эквивалентный) :first селектор, например:

$("ul > li > a:first").click(function() { ... });

Если вы хотите обработать только первое событие click и игнорировать любые последующие клики, вам нужно будет использовать .one(), как и вы.

Ответ 5

Вам нужно совместить first() с одним():

$( "ul>li>a" ).first().one('click', function () {});

Больше общего:

$( "ul>li>a:eq(n)" ).one('click', function () {});