Jquery : 获取距离最近的非兄弟元素的索引 class
Jquery : Get the index of non-siblings elements of the closest class
我正在尝试获取特定 class 中非同级输入 [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
我该如何解决这个问题?
非常感谢您的帮助!
您需要从表单内的文本输入中搜索索引,因此获取输入并将 index()
method with element as parameter. Also you can use :text
伪 class 应用到 select 文本输入,有助于减少代码。
$(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>
请注意,您可以对此进行简化:
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>
我正在尝试获取特定 class 中非同级输入 [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
我该如何解决这个问题?
非常感谢您的帮助!
您需要从表单内的文本输入中搜索索引,因此获取输入并将 index()
method with element as parameter. Also you can use :text
伪 class 应用到 select 文本输入,有助于减少代码。
$(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>
请注意,您可以对此进行简化:
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>