3

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

4

4 回答 4

4

你需要的是.siblings()

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

此外，由于#datatable是一个表格，您不需要指定tr td.. 只需选择复选框..

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

finallychecked也是 checkbox 的一个属性，所以不需要通过 jQuery 来查询它。你可以使用element.checked.

共

var boxes = $("#dataTable :checkbox");
var locations = [];
boxes.each(function () {
        if ( this.checked ) {
            //Code here
            $(this).closest('td').siblings('.thisOne').hide();
        }
    });
于 2012-12-11T00:25:58.053 回答
4 
var boxes = $("#DataTable :checkbox");
$.each(boxes, function() {
    if ( $(this).is(':checked') ) {             
        $(this).closest('td').siblings('.thisOne').hide();
    }
});
于 2012-12-11T01:58:44.543 回答
2

您正在寻找的线应该是这样的 -

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

让我们分解一下，

  1. $(element)- 复选框本身。
  2. closest('tr')最接近的父元素是 a <tr>。
  3. find('td.thisOne')- 从该父元素中，找到<td>具有thisOne该类的元素。

//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');
  }
});
于 2012-12-11T00:27:08.600 回答
0

要回答您的问题：

.next()不起作用，因为它只找到下一个兄弟。

对于您的情况，您需要.nextAll()找到所有以下兄弟姐妹，即

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

详细分解：

$(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();

工作演示在这里。

于 2012-12-11T00:32:06.027 回答