CODEWITHSUNDEEP
javascriptjquery
Rohith
Rohith

Reputation: 387

Get Distinct name of elements with a class using jquery

I have the following HTML:

Radio button list(s):

<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"/>

Checkbox list(s):

<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"/>

and the following 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>

how can I get distinct element names of class in jQuery?

Required result: 

["rdLst163", "rdLst164"]  
["chLst165", "chLst166"]

Upvotes: 3

Views: 5281

Answers (6)

jonhkr
jonhkr

Reputation: 638

Try this

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

read more about the map function here http://jqapi.com/#p=map

Upvotes: 0

Vivek S
Vivek S

Reputation: 5540

You can use the jQuery .unique() method,

jQuery.unique($('.required_Mandatory_RbtLst[name!=]'));

REF: http://api.jquery.com/jQuery.unique/

Upvotes: 0

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70149

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

Simply put, this solution maps the elements' names into a jQuery object-wrapped array which is iterated upon and the unique values are pushed into an array.

Mapping is not quite necessary, so for simplicity you could also do it skipping that step.

var cbnames = [];
$('.required_Mandatory_ChkLst[name!=]').each(function() {
    if (!~$.inArray(this.name, cbnames)) cbnames.push(this.name);
});
console.log(cbnames); //["chLst165", "chLst166"]

Fiddle

Upvotes: 6

Jacob T. Nielsen
Jacob T. Nielsen

Reputation: 2978

I believe what you want is this

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);

First we map the collection of dom elements to that of string values with the name of said element. Secondly we filter this collection of names to only contain unique instances.

Note: Other answers suggest the use of jQuery.unique. This method however works on collections of dom elements and in your case all of these are unique.

Upvotes: 2

Johan
Johan

Reputation: 35194

Similar to filter():

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

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

    console.log($(names));
});​

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

You can do something like:

Demo: http://jsfiddle.net/DvegQ/

Code:

var classNames = [];
$('*').each(function() { classNames[$(this).attr('name')] = 1; });
for(var x in classNames) { console.log(x); }

Upvotes: 2

Related Questions