Question

I’ve got a fiddle going here to show what I’m trying to do.

I have a table that is generated dynamically, so the columns could appear in whatever order the user chooses. So, I’m trying to get the index of two specific headers so that I can add a CSS class to those two columns for use later.

Answer 1

You should use .filter() here instead (and whenever you need to restrict the element set), since your .each() return is getting thrown away, like this:

//Loop thru the headers and get the Supp elem
var suppCol = $("#my_table th").filter(function() {
    return $(this).html() == "Supp";
});
//Loop thru the headers and get the Report elem
var reportCol = $("#my_table th").filter(function() {
    return $(this).html() == "Report";
});

You can test the updated/working fiddle here. The alternative using .each() would look like tis:

var suppCol, reportCol;
$("#my_table th").each(function() {
    var $this = $(this), html = $this.html();
    if(html == "Supp") suppCol = $this;
    if(html == "Report") reportCol= $this;
});

You can test that version here.