比较来自世界各地的卖家的域名和 IT 服务价格

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
已邀请:

裸奔

赞同来自:

我检查了你的代码 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

小明明

赞同来自:

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

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


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

詹大官人

赞同来自:

你必须使用


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


反而


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


这是一个工作示例
http://jsfiddle.net/rMLNH/1/
/

要回复问题请先登录注册