JQuery хранения и ссылки на массив элементов

Question

Я не совсем то, что я ищу в терминах jQuery / Javascript. Поведение, которое я ищу, похоже на типичное слайд-шоу лайтбокса со следующими элементами:

• список предметов
• нажатие на элемент вызовет новый элемент, который ссылается на элемент в списке
• в то время как новый элемент включает навигацию next / prev, которая ссылается на список элементов.

Я создаю что-то подобное и ищу технический подход для обработки вышеуказанного.

У меня есть это для примера кода:

<ul>
    <li><a href="samplelink.html">item 1</a></li>
    <li><a href="anotherlink.html">item 2</a></li>
    <li><a href="onemorelink.html">item 3</a></li>
</ul>

У меня все настроено так, что каждый LI A получает событие click, которое создает новый оверлейный DIV на странице, а затем добавляет в него .load ($ (this) .attr ('href)).

Все это прекрасно работает.

То, что я не знаю, как это сделать, - передать индекс LI, по которому я щелкнул, в новый div, чтобы я мог добавить правильные ссылки prev / next и фактически обратиться к следующему / prev элементу в исходном списке. Конкретный пример: если я щелкаю по второму элементу списка, в новом DIV, который я создаю, как мне передать в него информацию о том, что «это была вторая ссылка, открывшая это».

Answer 1

В вашем коде div вы можете снова выбрать элемент, соответствующий переданному значению href, и использовать next () и prev (), чтобы получить других братьев и сестер для данного элемента.

Answer 2

Когда вы создаете div, используйте функцию jQuery data, чтобы "связать" два элемента DOM:

$("ul li a").click(function(e){
    var $this = $(this);
    $("<div class='overlay'></div>")
        .data('trigger', $this)
        .appendTo(body)
        .load($this.attr('href'));
    e.preventDefault();
});

Тогда вы можете просто использовать событие .live для захвата кликов для next и previous в оверлее divs:

$("div.overlay a.next").live('click', function(e){
   var $div     = $(this).closest('div.overlay'),
       $trigger = $div.data('trigger'),
       $next    = $trigger.parent().next();

   if($next.length){
      // It got the next li
      // $next.find('a') would select the link

   } else {
      // It reached the end
      $next = $("ul li:first"); // Grab first now
      // $next.find('a') would select the link
   }
});

Напишите в значительной степени противоположное для prev.

Answer 3

Попробуйте это:

<ul>
    <li><a href="1">item 1</a></li>
    <li><a href="2">item 2</a></li>
    <li><a href="3">item 3</a></li>
</ul>

<a id="next">next</a>
<a id="prev">prev</a>

<script>
$('ul').bind('click', function(e) {
    var target = $(e.target);
    if (!target.is('a')) {
      return;
    }
    var li = target.parent();
    console.log('opening: '+target.attr('href'));

    var next = li.is(':last-child') ? li.siblings(':first') : li.next();
    var prev = li.is(':first-child') ? li.siblings(':last') : li.prev();

    $('#next').unbind('click').bind('click', function(e) {
        next.children('a').trigger('click');
    })
    $('#prev').unbind('click').bind('click', function(e) {
        prev.children('a').trigger('click');
    })
    e.preventDefault();
})
</script>