Question

Ignoring how I got to this (I have rolled up various function calls to simplify the example), why do I get Object doesn’t support this property or method for the next() call of the 4th line below?

JQuery to string together all selected items label text:

var cbs = $('#controlId :checkbox');              // Get all checkboxes for the specified control id
var rest = cbs.slice(1);                          // Get all items except the first
var checked = rest.filter(':checked');            // Get all checked items
var result = checked.get(0).next('label').text(); // Error here getting first label text
for (var i = 1; i < checked.length; i++) {
            result = result + ', ' + checked.get(i).next('label').text();
}

HTML is generated by ASP.Net for a CheckBoxList and looks like:

<table id="controlId">
    <TBODY>
        <TR>
            <TD>
                <INPUT id=MainContent_DropDownCheckBoxList4_checkBoxList_0 value=ALL type=checkbox>
                <LABEL for=MainContent_DropDownCheckBoxList4_checkBoxList_0>All</LABEL>
            </TD>        
        </TR>
        <TR>
            <TD>
                <INPUT id=MainContent_DropDownCheckBoxList4_checkBoxList_1value=0 type=checkbox>
                <LABEL for=MainContent_DropDownCheckBoxList4_checkBoxList_1>Item 0</LABEL>
            </TD>
        </TR>
        <TR>
            <TD>
                <INPUT id=MainContent_DropDownCheckBoxList4_checkBoxList_2 type=checkbox>
                <LABEL for=MainContent_DropDownCheckBoxList4_checkBoxList_2>Item 1</LABEL>
            </TD>
        </TR>
    </TBODY>
</TABLE>

What is the correct way to get the label text for the checkboxes (using the above style of code)?

Please do not provide answers using selectors that start back at $(‘#controlId’)

Answer 1

That’s because get() returns a DOM element, not a jQuery object, and DOM elements do not support the next() method (jQuery objects do).

You can use eq(0) or first() instead:

var result = checked.first().next("label").text();