代码之家 › 专栏 › 技术社区 › BenAlabaster

How can I get the index of an ancestor within another ancestor?

list jquery

BenAlabaster · 技术社区 · 15 年前

I've got a list that's got a mouseover 事件绑定:

myObject = function()
{

    this.listTemplate = $("<ul></ul>")
        .mouseover(function(event) {
          //Do mouse over stuff
        })
        .click(function(event) {
          //Do click stuff
        });

    //...more stuff
}

Later on in my code, I'm populating this list with items returned by an Ajax call, which all works swimmingly...

In the Ajax success method:

//...
$(items).each(function(item) {
    $("<li />").append("<a />").text(item.value)
   .appendTo(templateList);
});
//...

在我的 鼠标开关 事件 event.target returns the anchor as expected, but I need the index of the li 祖先(在 ul ) of the anchor I'm hovering over.

Given that the content of the 锂 could be more complex than just the anchor, does jQuery provide a simple way of finding that out?

也就是说,我徘徊在某个后代 li[0] 或 li[4] 等。。。

1 回复 | 直到 15 年前

Community CDub 8 年前

你可以使用 .index() ,像这样:

.mouseover(function(e) {
  var i = $(e.target).closest('ul').children().index($(e.target).closest('li'));
})

来自文档:

如果 索引() 对元素集合调用,并传入dom元素或jquery对象, 索引() returns an integer indicating the position of the passed element relative to the original collection.

This goes up to the <ul> , gets it's children (the <li> elements), and gets the index of the <理工大学; containing the link in that collection.

Alternatively, instead of using event.target you can do it a bit more cleanly with .delegate() ,像这样:

$("&lt;ul&gt;&lt;/ul&gt;").delegate('li', 'mouseover', function() {
  var index = $(this).index();
})

在这种情况下, this 指的是 <理工大学; 所以正常 索引() call just gets it's index relative to it's siblings, if it's an option...it's a bit simpler route to take.

Last, kind of tangential to the question, you don't need to encode < 和 > , you can just have:

$("<li />").append("<a />").text(item.value)

If you're doing this for XHTML/validation purposes, just wrap your script in CDATA to validate correctly .

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

8 月前

user28928120 · 如何在jquery中选择所有类?

9 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

9 月前

Eliable · 使点击计数器和进度条协同工作

9 月前

mlri · 从不同的onclick事件执行相同的javascript函数

9 月前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

9 月前

Jack Maessen · 在处理程序上使用时如何获取输入类型

9 月前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

10 月前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

10 月前