После нажатия на n-й элемент, как мне манипулировать другим n-ным элементом?

Question

Я использую jQuery и хочу выбрать nth

в списке после нажатия на n-ую ссылку.

<ul id="targetedArea">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<div id="clickedItems">
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</div>

Я могу нацелиться на них по отдельности, но я знаю, что должен пройти более быстрый путь, пройдя элемент , на который я нажал.

$("#clickedItem a:eq(2)").click(function() {
  $("#targetedArea:eq(2)").addClass('active');
  return false;
});

Ура,
Стив

Answer 1

как насчет этого:

$('#clickedItems a').click(function() {
// figure out what position this element is in
   var n = $('#clickedItems a').index($(this) );
// update the targetedArea
   $('#targetedArea li:eq('+n+')').html('updated!');
   return false;
});

при условии отношения 1: 1 между элементами <a> и <li> обновятся соответствующие <li>

Answer 2

Я знаю, что это не прямой ответ на ваш вопрос, но, возможно, вы делаете его более сложным, чем он есть.

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

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

Answer 3

$('#clickedItems a').click(function() {
    // you probably want to turn off the currently active one
    $('#targetedArea li.active').removeClass("active");

    // count the links previous to this one and make the corresponding li active
    $('#targetedArea li:eq(' + $(this).prevAll('a').length + ')').addClass("active");

    // prevent the browser from going to the link
    return false;
});

Answer 4

я не знаю, есть ли в jquery что-то подобное в mootools

$$('a.clickedItems').addEvent('click', function(e){
  e.preventDefault();
  $('targetedArea').getChildren()[this.getAllPrevious().length].addClass('selected');
});