Question

今天我遇到了jQuery .index（）函数的一个小问题。我有一个拥有 primaryContract 类的div列表。这些div中也包含选定的类。我想收到这个选定元素的索引。我尝试了很多操作，但没有任何作用，函数只返回-1（它是该函数的失败返回值）。

以下是相关HTML的一部分：

<div class="owl-carousel owl-loaded" rv-slide="context:stepHide" style="display: block;">
   <!-- rivets: each-contract -->
   <div class="owl-stage-outer">
      <div class="owl-stage" style="transition: 0s; width: 654px; transform: translate3d(218px, 0px, 0px);">
         <div class="owl-item active center" style="width: 109px;">
            <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">243992</div>
         </div>
         <div class="owl-item active" style="width: 109px;">
            <div class="primaryContract selected" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">444444</div>
         </div>
         <div class="owl-item active" style="width: 109px;">
            <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">665441</div>
         </div>
         <div class="owl-item" style="width: 109px;">
            <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">243992</div>
         </div>
         <div class="owl-item" style="width: 109px;">
            <div class="primaryContract selected" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">444444</div>
         </div>
         <div class="owl-item" style="width: 109px;">
            <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">665441</div>
         </div>
      </div>
   </div>
</div>

这是我关心的JS：

initializeSelectedCarouselItem:function(){
        var items = $("div.primaryContract");
        var index = items.index('.selected');
        console.log(index);

有人看到我犯了哪个错误吗？

Answer 1

无效的原因

您尝试传递类.selected，而index()期待对象或DOM元素。

如果在元素集合上调用.index（）并传入DOM元素或jQuery对象，.index（）将返回一个整数，指示传递的元素相对于原始集合的位置。如果选择器字符串作为参数传递，则.index（）返回一个整数，指示jQuery对象中第一个元素相对于选择器匹配的元素的位置。如果找不到该元素，.index（）将返回-1。

所做的更改

var selector = $('.selected')
var index = items.index(selector);

工作演示

＆＃13;

var items = $("div.primaryContract");
var selector = $('.selected')
var index = items.index(selector);
alert(index);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-carousel owl-loaded" rv-slide="context:stepHide" style="display: block;">
  <!-- rivets: each-contract -->
  <div class="owl-stage-outer">
    <div class="owl-stage" style="transition: 0s; width: 654px; transform: translate3d(218px, 0px, 0px);">
      <div class="owl-item active center" style="width: 109px;">
        <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">243992</div>
      </div>
      <div class="owl-item active" style="width: 109px;">
        <div class="primaryContract selected" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">444444</div>
      </div>
      <div class="owl-item active" style="width: 109px;">
        <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">665441</div>
      </div>
      <div class="owl-item" style="width: 109px;">
        <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">243992</div>
      </div>
      <div class="owl-item" style="width: 109px;">
        <div class="primaryContract selected" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">444444</div>
      </div>
      <div class="owl-item" style="width: 109px;">
        <div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'">665441</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

jQuery index()将仅从其父级返回子级索引，而不是从祖父级返回。因此，您已将其父母作为孩子使用祖父母作为父母

initializeSelectedCarouselItem:function(){
    var index = $(".primaryContract.selected").parent().index();
    console.log(index);
}

Answer 3

你应该得到父索引，因为 primaryContract 是父div的唯一子节点
流动此代码

var index = $(".primaryContract.selected").parent().index();

或

var indexes=[];
$(".primaryContract.selected").each(function(){
    indexes.push($(this).parent(".owl-item").index());
});
alert(indexes);

Jquery index（）找不到我的元素

3 个答案: