Question

我有一个html页面，全局存在div，section和ul元素（当然还有更多，但这些是最常见的）

现在是我在页面上的第四个列表（例如下面以粗体显示）


<body>
 <div>
  <header>
   <ul id="firstList">
    <li>
    [..]
  <section>
   <ul id="secondList">
    [..]
  <section>
   <ul id="thirdList">
   [..]
  <section>
   <ul id="fourthList">
    <li><a>Test 1</a></li>
    <li><a>Test 2</a></li>
    <li><a>Test 3</a></li>
   </ul>
  [..]

问题是，当有人点击测试时，我想循环遍历列表项以查看列表中点击的位置（它之前或之后有项目）

因此我有以下


$("a").click(function(event){
 [..]
 var parentEl = $(this).parents('ul').filter(":first").tagName;
 alert($(parentEl).attr("id"));
});

但是这给了我firstList作为输出。我假设jQuery从上到下查看文档，所以带有filter(:first)（哦和get(0)）的输出也让我觉得..但是我怎么会得到点击的第一个父亲链路？

如果有人点击Test 2我希望得到fourthList作为输出（并且最终是位置，但这是为了以后）

Answer 1

试试这个

$("a").click(function(event){
  [..]
  var $parentEl = $(this).closest('ul');
  alert( $parentEl.attr("id") );
});

并获得其兄弟姐妹之间的链接位置

$("a").click(function(event){
  [..]
  // returns the 0-based index of the `li` among it's sibling `li`s
  var idx = $(this).parent().prevAll().length;
});

Answer 2

即使您接受了答案，我也会留下答案，因为接受的答案并不能解释实际问题。

你的代码是正确的，除了一件事。您将tagName存储在变量中，并使用它来获取页面上的所有<ul>元素。如果你想摆脱它，你的代码就可以了。

$("a").click(function(event){
   var parentEl = $(this).parents('ul').filter(":first");
   alert( parentEl.attr("id") ); // should alert "fourth"
});

稍短的版本是：

$("a").click(function(event){
   var parentEl = $(this).parents('ul:first');
   alert( parentEl.attr("id") ); // should alert "fourth"
});

The .parents() method会按照查找顺序返回元素，因此:first会为您找到第一个元素。

来自文档：

..元素按顺序从最近的父元素返回到外元素。

您也可以use .closest()，但结果将是相同的。

此外，为了从兄弟姐妹中获得自己的位置，使用jQuery 1.4或更高版本的方法更为简单。你可以call .index()，如：

var index = $(this).parent().index();

这使您可以从其兄弟姐妹中找到<li>的位置。

无法选择直接父元素

2 个答案: