Problem with simple index() selection

JavaScript
1

I have table where one column has a specific class. This column is different in each table. My goal is to get the index of the column with the class. This means if the 4th column in the table has the class I want the selector to return 3. If the 1st column has the class it should return 0.

var defaultCol = jQuery('th', tables[i]).index(".dataTable-defaultSort");

This selector continues to output -1 meaning there is no matching text in the column. Any suggestions on what I can do to get this working?

Thanks.

2

What does the var i stand for? And could you post a minimal example of a table please? Just the header and one or two rows (with bogus data if you like) will be fine.

3

i is the variable used to loop through multiple tables.

<html>
<body>
<table class="dataTable">
<thead>
<tr>
<th>Column 1</th><th>Column 2</th><th class="dataTable-defaultSort">Column 3</th><th>Column 4</th>
</tr>
</thead>
<tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
</table>
<table class="dataTable">
<thead>
<tr>
<th>Column 1</th><th>Column 2</th><th>Column 3</th><th class="dataTable-defaultSort">Column 4</th>
</tr>
</thead>
<tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
</table>
<table class="dataTable">
<thead>
<tr>
<th>Column 1</th><th>Column 2</th><th class="dataTable-defaultSort">Column 3</th><th>Column 4</th>
</tr>
</thead>
<tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
</table>
<table class="dataTable">
<thead>
<tr>
<th class="dataTable-defaultSort">Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th>
</tr>
</thead>
<tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
</table>
<table class="dataTable">
<thead>
<tr>
<th>Column 1</th><th>Column 2</th><th class="dataTable-defaultSort">Column 3</th><th>Column 4</th>
</tr>
</thead>
<tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
</table>
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
renderDataTable(".dataTable");

function renderDataTable(selector) {
	var out = [];
	var tables = jQuery(selector);
	var sorting;
	
	for ( var i=0, iLen=tables.length ; i<iLen ; i++ )
	{
		var defaultCol = jQuery('th', tables[i]).index(".dataTable-defaultSort");
		alert(defaultCol); //Alert foreach table - value should be the index of the column with the class dataTable-defaultSort
    }
}
</script>
</body>
</html>

Output should be:
alert: 2
alert: 3
alert: 2
alert: 0
alert: 2

UPDATE:

Here is a slightly more complex solution to what I was trying to accomplish:

function renderDataTable(selector) {
	var out = [];
	var tables = jQuery(selector);
	var sorting;
	
	for ( var i=0, iLen=tables.length ; i<iLen ; i++ )
	{
		//var defaultCol = jQuery('th', tables[i]).index(".dataTable-defaultSort");
		var cols = jQuery('th', tables[i])
		for(var x=0; x<cols.length;x++){
			if(jQuery(cols[x]).hasClass("dataTable-defaultSort")) alert(x);
		}
    }
}
4

This works:


tables.each( function() {
	var defaultCol = $('th', this).index($('.dataTable-defaultSort', this));
	console.log(defaultCol); //Alert foreach table - value should be the index of the column with the class dataTable-defaultSort
});

:slight_smile: