jquery 使用选择器查找元素索引

我正在尝试使用这个功能 .index// 的 jQuery, 我可以了解它的工作原理。 结果不是我期望的。 这是我不理解的为什么的一个小例子 :

Html :


<div id="gallery">

<div class="gallery-item">item 1</div>

<div class="gallery-item active">item 2</div>

<div class="clearfix visible-lg"></div>

<div class="gallery-item">item 3</div>

<div class="gallery-item">item 4</div>

</div>

<div id="buttons">

<button id="next">next</button>

</div>

<span id="console">

</span>


JS :


jQuery/ document /.ready/function/ $ / {



 $/"#buttons > #next"/.click/function //{

 var items = $/".gallery-item"/;



 var index = items.find/".active"/.index//;

 $/"#console"/.append/"index : " + index + "<br/>"/;



 var indexWithSelector = items.index/".active"/;

 $/"#console"/.append/"index with selector : " + indexWithSelector + "<br/>"/;



 var prevAll = items.prevAll/".gallery-item"/.size//;

 $/"#console"/.append/"prevall : " + prevAll + "<br/>"/;



 $.each/items, function/index, val/ {

 $/"#console"/.append/"<br/>" + val.className/;

 }/;

 }/;



}/;


我期待所有的结果都是一样的。 : 1, 由于活动元素是零列表中的第二个。 但我得到它 :


index : -1

index with selector : -1

prevall : 3



gallery-item

gallery-item active

gallery-item

gallery-item


为什么？ 我做错了什么？

他在这里 CodePen :
http://codepen.io/anon/pen/meiBA
更新 :

我试图直接找到一个活动元素并使用索引来查找他的位置，并工作。 我尝试过这个 :


var active = $/".gallery-item.active"/;

var index = items.index/active/;

//index == 1
2022-12-15 添加评论
分享

没有找到相关结果

    已邀请:

    裸奔

    赞同来自:

    我检查了你的代码 jsfiddle. 我发现你得到了 -1, 因为在此上下文中，所以要查找的元素的索引不存在 :


    var items = $/".gallery-item"/; 
    
 var index = items.find/".active"/.index//;


    这里 items.find 除了空对象之外不会返回任何内容 jquery. 您正在尝试在Gallery元素的女儿元素中找到一个活动类。 但是活动类位于同一级别的另一个画廊--Item.so代码应该是 :


    var index = items.filter/".active"/.index//;


    这就是你得到这个的原因 -1. 由于它不是元素，因此索引返回 -1.


    index : -1


    现在让我们谈谈它 :


    index with selector : -1


    原因 -1 位于以下代码中 :


    var indexWithSelector = items.index/".active"/;


    在这里你找到了
    $/".gallery-item"/

    在集合中
    .active

    class.Which 它没有任何意义。
    如何
    .active

    它是画廊的一部分。

    搜索应该是这样的 :


    var indexWithSelector = items.filter/".active"/.index/".gallery-item"/;


    现在让我们检查以下代码 :


    var prevAll = items.prevAll/".gallery-item"/.size//;


    在这里，您正在尝试获得所有以前元素的大小。 元素大小相等的位置 4, IE
    $/".gallery-item"/

    , 他归还你的大小 4-1 = 3, 什么是对的

    .

    如果你试图得到 prev
    gallery-item

    班级
    active

    , 那么代码应该是 :


    var prevAll = items.filter/".active"/.prevAll/".gallery-item"/.size//;


    因此，正确的输出看起来像这样 :


    index : 1 
    
index with selector : 1
    
prevall : 1


    最后但不太重要 - 这是 jsfiddle. 我也对您的代码发表评论，以便您可以在我身上发表评论并检查效果 :

    http://jsfiddle.net/srahel007/Bwy78/1/
    : 光 FIDDLE
    2022-12-15 0 0
    分享

    小明明

    赞同来自: 

    var index = items.find/".active"/.index//;

    不会工作，因为 find// 方法找到其内容，而不是一个类，所以你可以使用
    http://api.jquery.com/hasclass/
    方法：


    var index = items.hasClass/".active"/.index//;
    2022-12-15 0 0
    分享

    詹大官人

    赞同来自:

    你必须使用


    items.index/$/"div.active"//;


    反而


    items.find/".active"/.index//;


    这是一个工作示例
    http://jsfiddle.net/rMLNH/1/
    /
    2022-12-15 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved