jQuery.each does not seem to work

Question

I have a rather bizarre situation where I am trying to iterate through check boxes using each. Problem is it does not want to go in the loop.

Please advise as to why?

This is the function

function AddTheProduct() {
    var txtTopicsGuids = "";

    var checkedTopics = document.getElementsByName("chkRelatedTopics");
    $(checkedTopics).each(function() {
        if ($(this).is(":checked")) {
            //action
        }
    });

and the markup

{{each Items}}
    <tr>
        <td>
            <input type='hidden' name='hidTopicsDomain' value='${DomainObjectKey}'/>
            <input type='checkbox' name='chkRelatedTopics' value='${subject}'/>
        </td>
    </tr>
{{/each}}

@Ram: No, `checkedTopics` should be a `NodeList`, because `getElementsByName` returns a `NodeList`. — Felix Kling, Sep 16 '13 at 13:47
Your code works fine for me in jsfiddle: http://jsfiddle.net/ did you consider the case where the checkboxes are not checked? — simonzack, Sep 16 '13 at 13:49
**Aside:** if you have no `else` condition then consider being more specific in your selector. `$('input[name=chkRelatedTopics]:checked').each( ...` — gvee, Sep 16 '13 at 13:52
Nice docs for you (just in case): http://www.jquerysdk.com/api/template-tag-each — Andrei, Sep 16 '13 at 13:52
@FelixKling, `document.getElementsByName()` returns an `HTMLCollection` not a `NodeList`. — Anthony, Sep 16 '13 at 14:19
@Arianule - Was this issue reproducible in multiple browsers? There are bugs specific to the returned object type for `getElementsByName` and certain browsers. Since Matias was able to use the sample code in a fiddle, perhaps it's not elsewhere in your code but in your test environment. — Anthony, Sep 16 '13 at 14:21
@Anthony: Actually that differs from browser to browser. The `HTMLCollection` interface is a super set of the `NodeList` interface, so it doesn't really matter (FWIW, according to the DOM2 specification the method should return a `NodeList`, see also http://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects/15763707#15763707). — Felix Kling, Sep 16 '13 at 14:56

score 2 · Accepted Answer · answered Sep 16 '13 at 14:00

Your javascript code should work. I think the problem has nothing to do with the $.each method but with something else.

Here is a simplified example of your code I recreated in jsFiddle.

Either the problem is in your template or somewhere else. Also, take into account the advice given in the other answers in terms of best practices, primarily make use of the appropriate selectors instead of doing getElementsByName and then wrapping that in a jQuery object.

score 1 · Answer 2 · answered Sep 16 '13 at 13:48

1

Use this:

function AddTheProduct() {
   var txtTopicsGuids = "";
   $("input[name=chkRelatedTopics]").each(function() {
       if ($(this).is(":checked")) {
          //action
       }

   });
}

answered Sep 16 '13 at 13:48

Code Lღver

15,573
16
56
75

there is no comparison between javascript and jquery. So, "_You are using javascript and jQuery mixeup_" doesn't make sense. I think so. – Mr_Green Sep 16 '13 at 13:50
@Mr_Green The OP is using the object created by javscript and then in jQuery. – Code Lღver Sep 16 '13 at 13:51

score 1 · Answer 3 · answered Sep 16 '13 at 13:48

1

Try:

$('input[name="chkRelatedTopics"]').each(function(){
if($(this).is(":checked")){
//do something here
}
});

answered Sep 16 '13 at 13:48

Kiran

20,167
11
67
99

jQuery.each does not seem to work

3 Answers3