CODEWITHSUNDEEP
jquery
Jeff
Jeff

Reputation: 2313

Issues selecting class in table

I am just diving into jquery, so please excuse any really silly mistakes...

I have a table I am generating from a database. 

<table id="DataTable">
    <tr>
        <th><input type="button" onclick=doCheck()></th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
        <td class="thisOne">data 5</td>
    </tr>
 .
 .
 .
  </table>

I need to perform some validation checks on column5, labeled thisOne, based on whether or not it is in a row where the box is checked. Here is what I have so far:

//Get checkboxes
var boxes = $("#DataTable").find("tr td input[type=checkbox]");
var locations = [];
boxes.each(function (index, element) {
        if ($(element).is(':checked')) {
            //Code here
        }
    });

In the area marked //code here I have tried many things and have not been able to successfully select the column I want. Some things I have tried (NOTE: I am using Hide() for testing purposes):

$(this).closest("td").next('.thisOne').hide(); Doesn't work
$(this).parent("td").next('.thisOne').hide();  Doesn't Work
$(this).closest("td").hide();                  Works as expected
$(this).closest("td").next().hide();           Works as expected
$('.thisOne').hide();                          Works as expected

Shouldn't the first line I listed work? .closest() will navigate up to the td level, where .next('thisOne') will traverse the DOM until a td tag with that class is found? Please explain any answers as I am really curious as to why this is not working. Thanks

Upvotes: 3

Views: 86

Answers (4)

Ronny Susetyo
Ronny Susetyo

Reputation: 89

var boxes = $("#DataTable :checkbox");
$.each(boxes, function() {
    if ( $(this).is(':checked') ) {             
        $(this).closest('td').siblings('.thisOne').hide();
    }
});

Upvotes: 4

Pang
Pang

Reputation: 10127

To answer your question:

.next() does not work because it only finds the next sibling.

For your case, you need .nextAll(), which finds all following siblings, i.e.

$(this).closest("td").nextAll('.thisOne').hide();

Detailed breakdown:

$(this)                // This is your checkbox.
.closest("td")         // This gets its closest ancester "td".
.nextAll('.thisOne')   // This finds the closest following sibling that has the class "thisOne".
.hide();

Working demo here.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196197

What you need is .siblings()

$(this).closest('td').siblings('.thisOne').hide();

Also since #datatable is a table, you do not need to specify tr td.. just go for the checkbox..

var boxes = $("#dataTable :checkbox");

Finally checked is also a property of the checkbox, so no need to query for it through jQuery.. You can use element.checked.

Altogether

var boxes = $("#dataTable :checkbox");
var locations = [];
boxes.each(function () {
        if ( this.checked ) {
            //Code here
            $(this).closest('td').siblings('.thisOne').hide();
        }
    });

Upvotes: 4

Lix
Lix

Reputation: 47986

The line you are looking for should look something like this -

$(element).closest('tr').find('td.thisOne');

Lets break it down,

  1. $(element) - the checkbox itself.
  2. closest('tr') the closest parent element that is a <tr>.
  3. find('td.thisOne') - from within that parent element, find the <td> element with the thisOne class.

//Get checkboxes
var boxes = $("#DataTable").find("tr td input[type=checkbox]");
var locations = [];
boxes.each(function (index, element) {
  if ($(element).is(':checked')) {
    var thatOne = $(element).closest('tr').find('td.thisOne');
  }
});

Upvotes: 2

Related Questions