Пропустить первый элемент списка при переборе неупорядоченного списка. JQuery - PullRequest
Новая
       11

Пропустить первый элемент списка при переборе неупорядоченного списка. JQuery

1 голос
/ 11 декабря 2011

У меня есть неупорядоченный список, где элементы списка содержат ссылки на изображения.Мой код в настоящее время перебирает элементы списка, получает href, создает новый контейнер изображений в div banner-holder и добавляет свойство src.

Что я хочу сделать, это пропустить первый списокЕсли у меня уже есть это изображение в banner-holder, и я не хочу добавлять его дважды.

Спасибо. 

$('li').each(function ()
    {
        var bigImage = $(this).find('a.main-img').attr('href');

        $('<img/>').attr('src', bigImage).appendTo('#banner-holder');

    });

Ответы [ 3 ]

6 голосов
/ 11 декабря 2011 
$('ul li').not(':first-child').each(function ()
    {
        var bigImage = $(this).find('a.main-img').attr('href');

        $('<img/>').attr('src', bigImage).appendTo('#banner-holder');

    });
2 голосов
/ 11 декабря 2011

Метод jQuery each передает индекс текущего элемента, поэтому вы можете использовать его: 

$('li').each(function (index)
{
    if (index > 0) { 
        var bigImage = $(this).find('a.main-img').attr('href');

        $('<img/>').attr('src', bigImage).appendTo('#banner-holder');
    }
});

Или вы можете сделать это с помощью gt селектор : 

$('li:gt(0)').each(function() {
    ...
});

Текущая документация jQuery содержит примечание о селекторе gt:

Потому что: gt ()является расширением jQuery и не является частью спецификации CSS, запросы с использованием: gt () не могут воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным методом DOM querySelectorAll ().Для повышения производительности в современных браузерах используйте вместо этого $ ("your-pure-css-selector"). Slice (index).

1 голос
/ 11 декабря 2011 
  $('li:not(:first-child)').each(function ()
    {
     var bigImage = $(this).find('a.main-img').attr('href');

      $('<img/>').attr('src', bigImage).appendTo('#banner-holder');

  });

Я не проверял это, но я думаю, что это будет работать.

...