Question

一个例子：

parent
 0 child-a
 1 child-b
   sub-child
 2 child-c
   sub-child
   sub-child

这项工作目前在我的小提琴中，只是想知道是否有更清洁的方法去做。但是如果点击了一个子 - （a | b | c），则会返回相应的索引（很像jQuery的.index（）...但是如果单击一个子的子子，则会获得相同的相应索引。

代码：

$j = jQuery.noConflict();
$j(function() {
    // when clicking , show which top level parent element it's in
    var element_to_stop_at = $j(".the_top_level_container");

    $j(document).click(function(event) {
        var target = $j(event.target);
        var index_of_top_level_element = 0;
        var found_target = false;

        var current = target;
        while ((current.length > 0) && current.attr("class") != element_to_stop_at.attr("class")) {
            current = current.parent();
        }

        var children = current.children();

        current = children.first();
        while (current.length > 0 && index_of_top_level_element < children.length) {
            if (current.has(target).length > 0 || current[0] == target[0]) {
                found_target = true;
                break;
            }
            current = current.next();
            index_of_top_level_element += 1;
        }
        if (false == found_target) {
            index_of_top_level_element = -1;
        }


        console.log("is the " + index_of_top_level_element + " th/nd/rd element in the containing element");
    });
});

有没有简单/快捷的方法来做到这一点？

基本上，我想要.index（）的功能，但是如果我点击.the_top_level_container个孩子之一的孩子，它应该返回相同的索引。

小提琴http://jsfiddle.net/DerNalia/4LSzt/

•单击中的三个部分/边框中的任意一个 •控制台将给出被点击元素所属的the_top_level_container个孩子的索引

Answer 1

我不知道这是否是您需要的，但请检查index()方法：

http://api.jquery.com/index/

Answer 2

从e.target开始，使用.closest()转到顶级容器的子级，然后使用.index()。

                   // child selector-------------------------v
var idx = $j(event.target).closest('.the_top_level_container > *')
                          .index();

DEMO： http://jsfiddle.net/4LSzt/22/

有没有更简单的方法来检查某个父元素的N子元素是什么？

2 个答案: