javascript - 访问 DOM 树中的特定字段

Question

我有这个 html 输出：

<tr>
  <td><input type="checkbox"/></td>
  <td>Value 1</td>
</tr>

我想检查复选框是否标记为checked，然后访问第二个td以获得"Value 1"

我试过这样的事情：

$( "tr td input[type=checkbox]" ).each(function( index ) {
     if ($(this).is(":checked"))
        {
          alert($(this).parent().eq(1).text());
        }
});

和

var checkValues = $('input[type=checkbox]:checked').map(function() {
    return $(this).parent().text();
}).get();

对于这两个示例，我得到一个空输出。关于这里出了什么问题的任何想法？我会很感激一些解释。

Answer 1

.parent()是td，你需要得到下一个兄弟

var checkValues = $('input[type=checkbox]:checked').map(function() {
    return $(this).parent().next().text();
}).get();

或者

$("tr td input[type=checkbox]:checked").each(function (index) {
    alert($(this).parent().next().text());
});

Answer 2

尝试使用closest最近tr的find第二个td：

$("tr td input[type=checkbox]").each(function( index ) {
    if (this.checked) {
        alert($(this).closest('tr').find('td:eq(1)').text());
    }
});

或者您可以转到parent td并使用next：

alert($(this).parent().next().text());

应该注意的是，如果您的 DOM 结构发生变化，第二种方法将中断，而第一种方法对更改更加健壮。