Jquery each question

Question

Hi guys,

I have a quick question that I need some help with if possible. Am I able to have more than one input with the same id and loop through the values of these? Something similar to the code below:

<p>ID:<input name="check_id" type="hidden" id="check_id"  value="1"/></p>
        <p>ID:<input name="check_id" type="hidden" id="check_id"  value="2"/></p>

jQuery("#check_id").each(function(){
var check_data = jQuery(this).val();
alert(check_data); 
});

Thanks

Paul

Answer 1

No. IDs must be unique. You will likely only select the first.

You could possibly do something like this, though it is less efficient:

jQuery("input[id=check_id]").each(function(){
    var check_data = jQuery(this).val();
    alert(check_data); 
});

But if you're going to do that, you might as well fix your IDs to be unique, and select by the name attribute.

jQuery("input[name=check_id]").each(function(){
    var check_data = jQuery(this).val();
    alert(check_data); 
});

If all the <input> elements you want are contained in a container, you could speed things up by specifying that container.

jQuery("#myContainer input[name=check_id]").each(function(){
    var check_data = jQuery(this).val();
    alert(check_data); 
});

This code example presumes there is a common ancestor with the ID myContainer.

---

EDIT: With regard to your question in the comment below, return false; inside an .each() loop only exits the loop. You could however set a flag that will tell the subsequent code whether or not to execute.

Something like this:

var shouldContinue = true;

jQuery("#myContainer input[name=check_id]").each(function(){
    var check_data = jQuery(this).val();
    if( someCondition ) {
        shouldContinue = false; // signal to not execute subsequent code
        return false;  // Halt the loop
    }
});

if( shouldContinue ) {
     // execute code if shouldContinue is true
}

Answer 2

In HTML, ids are unique. So no, you will just get a single object when using the #.. selector. Which one that is when you have assigned a single id multiple times is not defined; actually you should fix that!

Answer 3

The whole point of the HTML id attribute is that it is supposed to be unique.

Perhaps you want to use classes instead? For example, consider the following:

<p>ID:<input name="check_id" type="hidden" class="check_id" value="1" /></p>
<p>ID:<input name="check_id" type="hidden" class="check_id" value="2" /></p>

...

jQuery(".check_id").each(function() {
    var check_data = jQuery(this).val();
    alert(check_data); 
});

Answer 4

You can remove the id attribute (which as others have said, must be unique in a document) and use a attribute-equals selector to select by name, like this:

jQuery("input[name=check_id]").each(function() {
  var check_data = jQuery(this).val();
  alert(check_data); 
});

Or add class="check_id" (still removing the id="check_id") and use a class selector, like this:

jQuery(".check_id").each(function() {
  var check_data = jQuery(this).val();
  alert(check_data); 
});