Как выбрать родителя в списке - PullRequest
Новая
       4

Как выбрать родителя в списке

1 голос
/ 05 сентября 2011

У меня есть список, объявленный так: 

<ul>
  <li class="yearCategory"><a href="javascript:void(0)">2011</a></li>
  <ul class="subCategory">
  <li><a href="javascript:void(0)">January</a></li>
  <li><a href="javascript:void(0)">February</a></li>
</ul>
</ul>

Когда выбраны «Январь» или «Февраль», я хотел бы вернуть значение «yearCategory» этого определенного списка, в данном случае 2011.

Как это можно сделать с помощью jQuery? Я пытался поэкспериментировать с родителями и родителями, но не смог выбрать правильный элемент.

Это то, что я пробовал до сих пор: 

$(this).parent("ul").next("li")

Ответы [ 5 ]

4 голосов
/ 05 сентября 2011

во-первых, я почти уверен, что у вас неправильная разметка, ваша вложенная ul должна быть внутри элемента li следующим образом: 

<ul>
  <li class="yearCategory">
      <a href="javascript:void(0)">2011</a>
      <ul class="subCategory">
          <li><a href="javascript:void(0)">January</a></li>
          <li><a href="javascript:void(0)">February</a></li>
      </ul>
  </li>
</ul>

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

$('.subCategory li a').click( // The element that you are actually clicking is an A tag
    function()
    {
        var parent = $(this) // A tag
          .parent() // LI Tag
          .parent() // UL Tag
          .parent(); // Wrapper LI Tag

        alert($('a', parent).html()); // Output the HTML contents of the parents A tag
    }
);
1 голос
/ 05 сентября 2011

Слегка скорректируйте оценку, так как оригинал был недействительным: 

<ul>
  <li class="yearCategory">
    <a href="javascript:void(0)">2011</a>
    <ul class="subCategory">
      <li><a href="javascript:void(0)">January</a></li>
      <li><a href="javascript:void(0)">February</a></li>
    </ul>
  </li>
</ul>

И jQuery: 

$(document).ready(function() {
    $('ul.subCategory li a').click(function() {
        var year = $(this)
                     .parent()
                     .parent()
                     .parent()
                     .find('a')
                     .text();

        alert(year); // or whatever you want to do with the year
    });
});
0 голосов
/ 05 сентября 2011

Учитывая предоставленную вами наценку, это должно сработать - 

$("a").click(function () {
    alert($(this).parents('ul').find('li.yearCategory > a').text())
})

Рабочая демоверсия - http://jsfiddle.net/ipr101/Krtcs/

Вы должны быть осторожны с этим, так как он будет срабатывать при всех щелчках «а», но будет работать только тогда, когда ссылка вложена так же, как ссылки «Январь» и «Февраль». *

Кроме того, как указывает Томалак Гереткал в комментариях ниже, код будет работать с разметкой, представленной в OP, он может завершиться ошибкой в ​​зависимости от разметки, окружающей его.

0 голосов
/ 05 сентября 2011

Возможное решение может быть следующим: 

$("li.yearCategory a:fisrt", $(anchorNode).parent().parent()).text();

... но для упрощения я бы добавил идентификатор к родительскому ul, разрешив простой селектор, такой как: 

$("ul#myid li.yearCategory a:first").text()
0 голосов
/ 05 сентября 2011

Допустим, ваш начальный элемент - это a-Tag (содержащий текст «январь»). Чтобы получить значение 2011 года, вам нужно сделать следующее: 

var result = $start.parent().parent().prev().find("a").text();

цепь будет выглядеть так: Первый родитель приводит вас к «li», содержащему ваше «a». второй родитель приводит вас к «ul», содержащему это «li». prev возвращает вас к элементу перед вашим элементом ul, поэтому ваш li с классом yearCategory. затем найдите свой a-тег, содержащий текст, который вы хотите.

Например, если ваш начальный элемент был не вашим тегом "a", а тегом "li", вам понадобится на одну функцию меньше "parent": 

var result = $start.parent().prev().find("a").text();

Надеюсь, это поможет!

...