javascript - jQuery 按名称获取元素

Question

由于必要的字符减少，我想将我们的 javascript 转换为 jQuery。这是我的 HTML 和 Javascript

var shorty = document.getElementsByName("DPdays")[0].getElementsByTagName("td")[i].id;

<tr class="DPtag" name="DPdays">
	<td id="MO">&nbsp;</td>
    <td id="DI">&nbsp;</td>
    <td id="MI">&nbsp;</td>
    <td id="DO">&nbsp;</td>
    <td id="FR">&nbsp;</td>
    <td id="SA">&nbsp;</td>
    <td id="SO">&nbsp;</td>
</tr>

我试过那些：

var shorty = $('.DPtag > td:eq('+i+')').attr('id');
var shorty = $('[name=DPdays] > td:eq('+i+')').attr('id');
var shorty = $('[name=DPdays] > td:eq('+i+')').id;

但没有一个有效。我怎样才能做到这一点？

Answer 1

请注意，至少在 Chrome 和 Firefox 中，<td>如果元素未包含在<table>标签中，则无法选择它们。如果您不这样做，这无论如何都不是有效的 HTML。我假设这i是一个循环中的变量来获取所有 id。在 jQuery 中，你可以这样做：

var $td = $('.DPtag td'); 
for (var i = 0; i < $td.length; i++) {
  var shorty = $td[i].id;
  console.log(shorty);
}

小提琴：https ://jsfiddle.net/q3q076tn/

编辑：当然你可以在没有 jQuery 的情况下编写它，就像交换一样简单：

var $td = $('.DPtag td');

和：

var $td = document.querySelectorAll('.DPtag td');

重要节点：像在问题和接受的答案中那样获取数据并不是一个好主意。

1. <td>您将在循环的每次迭代中重新选择/搜索所有元素。这使它变得不必要地缓慢。
2. 您将 name 属性用于<tr>不是有效 HTML 的标记。正如CBroe已经提到的那样。另请参阅：https ://developer.mozilla.org/en-US/docs/Web/API/Element/name这就是您应该通过类或 ID 选择它的原因。

Answer 2

实际上你不需要 jQuery 来更简洁地编写它：

document.querySelectorAll('[name=DPdays] td')[i].id

但如果你更喜欢 jQuery

$('[name=DPdays] td')[i].id