Question

我只是潜入jquery，所以请原谅任何真正愚蠢的错误......

我有一个从数据库生成的表。

<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>

我需要对第5列标记thisOne执行一些验证检查，具体取决于它是否在检查框的行中。以下是我到目前为止的情况：

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

在标有//code here的区域，我尝试了很多东西，但未能成功选择我想要的列。我尝试过的一些事情（注意：我使用Hide()进行测试）：

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

我列出的第一行不应该起作用吗？ .closest()会导航到td级别，其中.next('thisOne')会遍历DOM，直到找到包含该类的td标记？请解释任何答案，因为我真的好奇为什么这不起作用。感谢

Answer 1

您需要的是.siblings()

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

此外，由于#datatable是一个表格，因此您无需指定tr td ..只需选中复选框..

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

最后checked也是复选框的属性，因此无需通过jQuery查询它。您可以使用element.checked。

共

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

Answer 2

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

Answer 3

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

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

让我们分解，

$(element) - 复选框本身。
closest('tr')最近的父元素是<tr>。
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');
  }
});

Answer 4

回答你的问题：

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

工作演示here。

选择表中的类的问题

4 个答案: