How can I get the id in classes with equal names?

Question

How can I get the id of the alternative and know if it is 0, 1 or 2.

<div class="quest-alternatives">
<p class="brand-alternative">
<span class="brand-id hidden" style="display: none;">123</span>
<span class="radio-button" id="brand-0"></span>
<label for="brand-0" class="brand-name">Opção 0</label></p>

<p class="brand-alternative">
<span class="brand-id hidden" style="display: none;">456</span>
<span class="radio-button" id="brand-1"></span>
<label for="brand-1" class="brand-name">Opção 1</label></p>

<p class="brand-alternative">
<span class="brand-id hidden" style="display: none;">789</span>
<span class="radio-button" id="brand-2"></span>
<label for="brand-2" class="brand-name">Opção 2</label></p></div>

used the $('span.brand-id.hidden').html() however it only returned me the id of the first alternative also tried to use the $.each I just don’t quite understand how it works.

Answer 1

Try doing a function to check a property of the element itself (removing unnecessary html code), something like (I removed the span hidden value in html and set a value for name) :

<div class="quest-alternatives">
<p class="brand-alternative">

<span class="radio-button brand-id" name="123" id="brand-0"></span>
<label for="brand-0" class="brand-name">Opção 0</label></p>

<p class="brand-alternative">

<span class="radio-button brand-id" name="456" id="brand-1"></span>
<label for="brand-1" class="brand-name">Opção 1</label></p>

<p class="brand-alternative">

<span class="radio-button brand-id" name="789" id="brand-2"></span>
<label for="brand-2" class="brand-name">Opção 2</label></p></div>

Jquery must be this:

$('.brand-id').each(function(index, value){
 var id = $(this).attr("id"); // retorna brand-0/brand-1/brand-2
 var valor = $(this).attr("name"); // retorna 123/456/789
 alert(id + "-" + valor);
});

Here comes the Jsfiddle with the code.

Answer 2

When you have a selector that returns more than one element, and you call the method html in it, it only returns the result of the first element. Several functions of jQuery work the same way.

If you want the contents of all elements (in a list, for example), you can use the function .map:

$('span.brand-id.hidden').map(function() {
    return $(this).html();
});

Example in jsFiddle. The result is an "array-like" that you can save or use in a for normal (i.e. using the length, accessing the elements as lista[0] etc.).