I have the following array that holds a number of option elements, depending on if it has the hidden class or not.
var list = $('#condition option').not('.hidden');
How can I get an array of classes these elements have?
What I have tried:
var list = $('#condition option').not('.hidden').attr('class');
However, this only returns classes associated with the last element in the array.
You can use .map():
$('#condition option').not('.hidden').map(function() {
return this.className.split(' ');
}).get();
trim and /\s+/ to avoid spaces. For example apply your code in this element <option class="a b c "> it will not work as expected .Like suggested in the comments, use JQuery's each function.
var list_condition = $('#condition option').not('.hidden');
var list_class = []; // Creates an empty array
$(list_condition).each(function(index) {
list_class.push($(list_condition)[index].attr('class')); // Pushes the element into the array
});
index see my answer.You can do that using jQuery.each() function
Example:
var list = $('#condition option').not('.hidden'),
classes = [];
$(list).each(function () {
classes.push($(this).attr('class'));
});
console.log(classes);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="condition">
<option class="some-class-1" > some option </option>
<option class="some-class-2" > some option </option>
<option class="some-class-3" > some option </option>
<option class="some-class-4" > some option </option>
<option class="some-class-5" > some option </option>
<option class="some-class-6" > some option </option>
<option class="some-class-7" > some option </option>
<option class="some-class-8" > some option </option>
</select>Update
If you want to split/separate every single element, for example if some option have some classes like class-1-a, class-1-b .. etc
in this case you may need String.prototype.split()
Example
var list = $('#condition option').not('.hidden'),
allClasses = [];
$(list).each(function () {
var elemClasses = $(this).attr('class');
elemClasses.trim().split(/\s+/).map(function (x) {
allClasses.push(x);
})
});
console.log(allClasses);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="condition">
<option class="some-class-1-a some-class-1-b" > some option </option>
<option class="some-class-2-a some-class-1-b " > some option </option>
<option class="some-class-3" > some option </option>
<option class="some-class-4" > some option </option>
<option class="some-class-5" > some option </option>
<option class="some-class-6" > some option </option>
<option class="some-class-7" > some option </option>
<option class="some-class-8" > some option </option>
</select>Maybe something like this. The list selects all of the dom elements.
The .each iterates through them all.
var list = $('#condition option').not('.hidden').attr('class');
$(list).each(function( index ) {
var myClass = $(this).attr("class");
console.log(myClass);
});
class is a reserved keyword. It's not recommended to use it as variable name.console.log(class);
$('#condition option')and loop through it like with.eachas @Huangism said?let listOfClasses = Array.from(document.querySelectorAll('#condition option')).map(el => el.getAttribute('class')).filter(cls => !cls.match(/hidden/));One liner, no jquery.