为多类元素中某一类的元素查找Dom节点索引

Finding Dom Node Index for elements of a certain class of a multi-class element

本文关键字：元素 查找 Dom 节点 一类 索引      更新时间：2023-09-26

Hi我有一系列带有多个不同类的标签。单击跨度时，我想返回跨度类的索引。所以不是跨度本身的索引。

这是一个示例html:

<span class='spantype1 party'>text1</span>
<span class='spantype2 party'>text2</span>
<span class='spantype1 party'>text3</span>

所以如果我点击文本3，我想返回1而不是2。如果我点击文本1，我想返回0。当然，如果我点击text2，我想返回0。

这里的这个答案不起作用，因为索引总是返回为-1（因为有多个类），请参阅我的示例jsfiddle:

$( "span" ).click(function() {
    var index = $('.' + $(this).attr('class')).index($(this));
    alert(index);
});

我会使用一个过滤器来获取你感兴趣的类，并在此基础上进行搜索：

$("span").click(function() {
    var spanType = $.grep(this.classList, function (className) {
        return /^spantype/.test(className);
    })[0];
    var index = $('.' + spanType).index($(this));
    alert(index);
});

我在上面使用了classList，但为了获得更好的支持（请参阅caniuse.com），您可能会使用className：

$("span").click(function() {
    var spanType = $.grep(this.className.split(/'s+/), function (className) {
        return /^spantype/.test(className);
    })[0];
    var index = $('.' + spanType).index($(this));
    alert(index);
});
相关文章：