Question

是否有更优雅的方式处理对象中的多个对象。例如：

<table class="thisTable">
    <tr class="thisRow">
        <td class="row1"></td>
        <td class="row2"></td>
        <td class="row3"></td>
    </tr>
</table>

而不是：

$("table.thisTable tr.thisRow td.row1").text("Hi")
$("table.thisTable tr.thisRow td.row2").text("Mom")
$("table.thisTable tr.thisRow td.row3").text("Dad")

是否有一种方法允许：

$("table.thisTable tr.thisRow").function() {
    $(this).children("td.row1").text("Hi");
    $(this).children("td.row2").text("Mom");
    $(this).children("td.row3").text("Dad");
}

我知道你在功能上没有获得任何东西，但是我有很多长选择器开始难以在代码中进行跟踪和维护。

我一直在搜索jQuery文档，但这个概念并没有突然出现在我身上，我的谷歌搜索术语并没有让我朝着正确的方向前进。

Answer 1

您可以做的一件事是将主选择器缓存为变量：

var $tr = $("table.thisTable tr.thisRow");
$tr.find('td.row1').text('Hi');
$tr.find('td.row2').text('Hi');
$tr.find('td.row3').text('Hi');

或者您可以对它们进行分组并提供上下文：

$('td.row1, td.row2, td.row3', 'table.thisTable tr.thisRow').text('Hi');

Answer 2

这将选择.thisRow行下的所有tds，并将其文字设置为一行。

$('.thisRow td').text('Hi');

作为参考，类用于将元素组合在一起。您正在使用该类作为id，它使用唯一名称单独标识每个元素。如果您熟悉CSS，则选择器的工作方式与CSS中的选择器类似。

Answer 3

只需使用：

$("table.thisTable tr.thisRow td.row1").text("Hi");

Answer 4

$(document).ready(function() {
    $('.thisRow').children().each(function(index, obj) {
        $(obj).text('Hi');
        });
    });

将遍历子项并允许您单独处理每个元素。此外，.children（）只会向下移动一个级别，其中.find（）将遍历DOM的多个级别（如果您的示例在实践中变大）。

Answer 5

你的问题有点模糊，我猜这是因为你不知道该问什么。但我认为除了@ Alex的回答之外，你还在寻找$.each()函数。

$("table.thisTable tr.thisRow").children().each(function() {
  // "this" is the current child of tr.thisRow
  $(this).text('Hi!');
});

更新

回应你的评论：你必须记住jQuery选择器只是字符串，因此你可以做任何你想要生成它们的事情。我一直这样做：

var base_selector = 'table#my-id tr.my-row-class '; // notice the space
$(base_selector + 'td.something').css('backgroundColor', 'red');

jQuery：附加对象的子元素

5 个答案:

更新