Question

我有一个列表，声明如下：

<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>

当选择“1月”或“2月”时，我想返回该特定列表的“yearCategory”值，在本例中为2011.

如何使用jQuery完成这项工作？我尝试过尝试父母和父母，但没有设法选择正确的元素。

这是我到目前为止所尝试的：

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

Answer 1

首先我很确定你所拥有的是无效的标记，你的嵌套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
    }
);

Answer 2

由于原件无效，请稍微调整标记：

<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
    });
});

Answer 3

假设您的起始元素是a-Tag（包含文本'January'）。要达到2011年的价值，你应该这样做：

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

链将是：第一个父母让你到“li”包含你的“a”。第二个父母让你到“ul”包含“li”。 prev会让你到“ul”元素之前的元素，所以你的li与类“yearCategory”。然后找到包含所需文本的a-Tag。

例如，如果你的startelement不是你的“a”-Tag，而是“li”-Tag，你需要少一个“父” - 函数：

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

希望这有帮助！

Answer 4

可能的解决方案如下：

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

...但是为了简化事情，我会通过允许一个简单的选择器为父ul添加一个id：

$("ul#myid li.yearCategory a:first").text()

Answer 5

鉴于您提供的加价，这应该有效 -

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

工作演示 - http://jsfiddle.net/ipr101/Krtcs/

你必须小心这一点，因为它会触发所有'a'点击，但只有当链接以“1月”和“2月”链接的方式嵌套时才会起作用。

另外，正如Tomalak Geret'kal在下面的评论中指出的那样，代码将与OP中提供的加价一起使用，它可能会失败，具体取决于它周围的标记。

如何在列表中选择父级

5 个答案: