Jquery .each(): find elements containing input

Question

Hey,

I have a table which have a thead section and a tbody section. Im using jQuery each to find and count all THs in a table. This works fine. But at the same time i want to check if the TDs of the THs in the tbody is containing any input elements.

Here is what i have so far:

jQuery('#' + _target).each(function () {

        var $table = jQuery(this);
        var i = 0;
        jQuery('th', $table).each(function (column) {
            if (jQuery(this).find("input")) {
                dataTypes[i] = { "sSortDataType": "input" }
            }
            else {
                dataTypes[i] = { "sSortDataType": "html" }
            }

            i++;
        });
    });

I hope this is enough information for you to help me out?

Answer 1

Like this:

if (jQuery(this).is(":has(input)")) {

You can simplify your code using .map:

    dataTypes = jQuery('th', $table).map(function () {
        if (jQuery(this).is(":has(input)"))
            return { "sSortDataType": "input" };
        else
            return { "sSortDataType": "html" };
    }).get();

Answer 2

If you're just looking for the counts could you not just use something like the following?

var thMatches = $('#' + _target + ' th');
var thCount = thMatches.length;
var thCountWithInputs = thMatches.find('input').length;

I've not got my IDE in front of me so the above may not be correct however I think it's pretty close to what you are looking for.

Answer 3

Each will give you the index of the element in the list. Assuming that all of your TH elements belong to a column and you have no THs elsewhere in the table, you can use this to find the nth-child TD (column) elements of each row and see if any of those contain an input.

jQuery('#' + _target).each(function () {
    var $table = jQuery(this);
    var i = 0;
    jQuery('th', $table).each(function (column) {
        if ($('tbody > tr').find('td:nth-child(' + (column+1) + ')')
                           .has('input')
                           .length) {
            dataTypes[i] = { "sSortDataType": "input" }
        }
        else {
            dataTypes[i] = { "sSortDataType": "html" }
        }

        i++;
    });
});

EDIT: nth-child is one-based, whereas each is zero-based, so I've added one to the column variable to account for this.

Answer 4

dataTypes = $('#' + _target + ' th').map(function(i, th) {
  var $table = $(th).closest('table');
  var pos = $table.index(th) + 1;
  return { "sSortDataType": $table.find('td:nth-child('+pos+')').is(':has(input)') ? 'input' : 'html' };
});

Edit: if you are running this on a single table (in which case the each call in the original example does not make much sense), it gets simpler:

dataTypes = $('#' + _target + ' th').map(function(pos, th) {
  return { "sSortDataType": $(th).closest('table').find('td:nth-child('+(pos+1)+')').is(':has(input)') ? 'input' : 'html' };
});