Question

我正在尝试获取特定类中非兄弟输入[type ='text']元素的索引。这是代码：

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
</form>

<form class="myForms">
<input class="myClass" type="text" />  -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 3
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" />
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="text" /> -> expected value 3
 </form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" /> 
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 2
</form>

我试过这个Jquery代码：

$(document).on("keyup","input[type='text']",function(e){

var elem = $(this);
var theClosest = elem.closest('.myForms');

// And then :
console.log(elem.index(theClosest));

});

// But, I'm wrong : it always returns -1

我该如何解决这个问题？

非常感谢你的帮助！

Answer 1

您需要从表单内的文本输入中搜索索引，因此请获取输入并应用 index() 方法，并将元素作为参数。您还可以使用 :text 伪类来选择有助于减少代码的文本输入。

$(document).on("keyup", ":text", function(e) {
  var elem = $(this),
    form = $(this).closest('.myForms');
  console.log(form.find(':text').index(elem));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="text" />
</form>

Answer 2

请注意，您可以简化此操作：

input[type='text']

......对此：

:text

你想要的是以前兄弟姐妹的文字类型的数量：

$(document).on("keyup",":text",function(e){
  var elem = $(this);
  console.log(elem.prevAll(':text').length);
});

<强>段：

$(document).on("keyup",":text",function(e){
  var elem = $(this);
  console.log(elem.prevAll(':text').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
</form>

<form class="myForms">
<input class="myClass" type="text" />  -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 3
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" />
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="text" /> -> expected value 3
 </form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" /> 
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 2
</form>

Jquery：获取最近类的非兄弟元素的索引

2 个答案: