Question

When I do a .find with a name=value selector, I’m getting no elements. My syntax looks correct and I can’t see what I’m doing wrong. I know the object that it is selecting from has elements, 7 to be exact, with the attribute I’m looking for. So I’m stumped as to why the .find is not working.

Javascript on page:

$(document).ready(function () {
        var mainCatName = 'category.SelectedValue'
        $('#Button1').on('click', function () {
            var td = $('input[name="' + mainCatName + '"]:checked').parent('td');
            var tdIndex = td.index();
            if (selectElems == null) {
                //1 
                selectElems = $("#pumpConfigTable td:nth-child(" + (tdIndex + 1) + ") select,  #pumpConfigTable td:nth-child(" + (tdIndex + 1) + ") input");
            }

            var projectInfoID = $('#ProjectInfoID').attr('value');
            var mainCategoryID = $('input[name="' + mainCatName + '"]:checked').attr('value');
            var postBackObject = makeProjectInfoObjects(projectInfoID, mainCategoryID, selectElems);
            var blah = "blah";
        });


    });

Partial source for makeProjectInfoObjects:

function makeProjectInfoObjects(pInfoID, mainCatID, pcOptions) {

    //var pc = new PumpConfig();
    var pc = new Array();
    var dbIDs = _.pluck(pcOptions, "data-dbid");
    var uniquedbIDs = _.unique(dbIDs);
    uniquedbIDs = _.reject(uniquedbIDs, function (checkID) { return checkID == undefined; });
    var len = uniquedbIDs.length;

    for (var i = 0; i < len; ++i) {
        //2
        var categories = $(pcOptions).find("[data-dbid='" + uniquedbIDs[i] + "']");
        var uniqueNames = _.pluck(categories, "name");
        var singleOptions = $(categories).find(':not([name]');
        var soLen = singleOptions.length;
        for (var j = 0; j < soLen; ++j) {
            pc.push({
                pcID: uniquedbIDs[i],
                pInfoID: pInfoID,
                configCatID: mainCatID,
                configSubCatID: $(singleOptions[i]).attr('data-subcatid'),
                configValue: $(singleOptions[i]).attr('value')
            });

I’m using JQuery 1.8.1 and IE8 on XP.

According to IE Developer Tools the first selector comes out to be this (and it works):
//1 "#pumpConfigTable td:nth-child(2) select, #pumpConfigTable td:nth-child(2) input"

The second selector comes out to be this (and it doesn’t work):
//2 "#pumpConfigTable td:nth-child(2) select, #pumpConfigTable td:nth-child(2) input [data-dbid='1']"

Answer 1

If you wish to find input and select elements with a specific attribute data-dbid then you shouldn’t use find() as this method searches for elements that are descendants of the elements you are selecting with your selector string:

"#pumpConfigTable td:nth-child(" + (tdIndex + 1) + ") select,  #pumpConfigTable td:nth-child(" + (tdIndex + 1) + ") input"

Your matched elements will be select elements and input elements. I think I’m correct in assuming you want to find specific elements within this set? If so, try using jQuery’s filter() method instead of find.

.filter( selector )

Returns: jQuery

Description: Reduce the set of matched elements to those that match the selector or pass the function’s test.

So you would do this:

var categories = $(pcOptions).filter("[data-dbid='" + uniquedbIDs[i] + "']");