logo标签列表

使用jQuery获取具有特定类名的元素的唯一名称

javascriptjquery
3
我有以下的HTML代码：

单选按钮列表：

<input name="rdLst163" class="required_Mandatory_RbtLst" id="rdLst163_1" onclick="fn("1631");" type="radio" value="1"/>
<input name="rdLst163" class="required_Mandatory_RbtLst" id="rdLst163_2" onclick="fn("1632");" type="radio" value="2"/>
<input name="rdLst163" class="required_Mandatory_RbtLst" id="rdLst163_3" onclick="fn("1633");" type="radio" value="3"/>

<input name="rdLst164" class="required_Mandatory_RbtLst" id="rdLst164_1" onclick="fn("1641");" type="radio" value="1"/>
<input name="rdLst164" class="required_Mandatory_RbtLst" id="rdLst164_2" onclick="fn("1642");" type="radio" value="2"/>
<input name="rdLst164" class="required_Mandatory_RbtLst" id="rdLst164_3" onclick="fn("1643");" type="radio" value="3"/>

复选框列表：
<input name="chLst165" class="required_Mandatory_ChkLst" id="chkLst165_1" onclick="fn("25");" type="checkbox" value="1"/>
<input name="chLst165" class="required_Mandatory_ChkLst" id="chkLst165_2" onclick="fn("25");" type="checkbox" value="2"/>
<input name="chLst165" class="required_Mandatory_ChkLst" id="chkLst165_3" onclick="fn("25");" type="checkbox" value="3"/>

<input name="chLst166" class="required_Mandatory_ChkLst" id="chkLst166_1" onclick="fn("25");" type="checkbox" value="1"/>
<input name="chLst166" class="required_Mandatory_ChkLst" id="chkLst166_2" onclick="fn("25");" type="checkbox" value="2"/>
<input name="chLst166" class="required_Mandatory_ChkLst" id="chkLst166_3" onclick="fn("25");" type="checkbox" value="3"/>

并且下面是jQuery:
<script>
$(document).ready(function () {
  $('.required_Mandatory_ChkLst[name!=]'); 
  $('.required_Mandatory_RbtLst[name!=]');
// result is fetching all 6 elements. I need only distinct element names [here 2 elements] in each class.
});
</script>

如何使用jQuery获取class的不同元素名称？
所需结果：
["rdLst163", "rdLst164"]  
["chLst165", "chLst166"]
6个回答
6
var cbnames = [];
$('.required_Mandatory_ChkLst[name!=]').map(function() {
    return this.name;
}).each(function(i, str) {
    if (!~$.inArray(str, cbnames)) cbnames.push(str);
});
console.log(cbnames); //["chLst165", "chLst166"]

Fiddle

简单来说，这个解决方案将元素名称映射到一个jQuery对象包装的数组中，该数组被迭代，并且唯一的值被推入到一个数组中。maps表示将元素名称映射到数组中，iterated表示对数组进行迭代，pushed表示将唯一值推入到数组中。
映射不是必需的，因此为了简单起见，您可以跳过这一步进行操作。
var cbnames = [];
$('.required_Mandatory_ChkLst[name!=]').each(function() {
    if (!~$.inArray(this.name, cbnames)) cbnames.push(this.name);
});
console.log(cbnames); //["chLst165", "chLst166"]

小提琴

2
您可以这样做：
演示：http://jsfiddle.net/DvegQ/ 代码：
var classNames = [];
$('*').each(function() { classNames[$(this).attr('name')] = 1; });
for(var x in classNames) { console.log(x); }
@techfoobar，在函数中为classNames分配1是什么意思？ - vishal
2
我认为您需要的是这个。
var mapped = $('.required_Mandatory_ChkLst[name!=], .required_Mandatory_RbtLst[name!=]').map(function() {
    return $(this).attr('name');
});

var unique = mapped.filter(function (i, itm) {
    return i == $.makeArray(mapped).indexOf(itm);
});

console.log(unique);

首先，我们将DOM元素的集合映射到字符串值的集合中，并使用该元素的名称作为字符串值。 其次，我们过滤这个名称集合，只保留唯一的实例。
注意：其他答案建议使用jQuery.unique方法。然而，该方法仅适用于DOM元素的集合，在您的情况下所有这些元素都是唯一的。
感谢您的综合回答。 - Rohith
@rohith86 如果您喜欢不同的答案，请选择投票支持它们。 - Jacob T. Nielsen
1

类似于filter()：

$(function(){
    var names = [];
    $('.required_Mandatory_RbtLst').each(function(){

        if($.inArray($(this).prop('name'), names) === -1)
            names.push($(this).prop('name'));
    });

    console.log($(names));
});​
0
1
你试过吗？元素不同，名称属性相等。在我看来，.unique会返回相同的数组。 - naivists
@永不放弃：选择器返回了所有6个元素.. 我尝试了 jQuery.unique($('.required_Mandatory_RbtLst[name!=]')); - Rohith
@rohith86，你试过我的答案了吗？unique()应该将一个DOM元素数组作为参数，而不是一个jQuery对象。 - Johan
@Johan：那个也不行，但是你建议的新方法可行。 - Rohith
0

试试这个

var names = $("input").map(function(){ return $(this).attr('name'); });
var distinctNames = $.unique(names);

在这里阅读有关map函数的更多信息http://jqapi.com/#p=map

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接