Question

<tr class='abc'>
    <td></td>
    <td></td>
    <td></td>
    <td>
       <input></input>
    </td>
    <td></td>
</tr>

我想点击tr的第4个孩子的输入，提醒一下，我该怎么办？

Answer 1

使用nth:child选择器。

选择器匹配一系列child elements个numeric position，其子系列中的.abc td:nth-child(4) input与 an + b 模式匹配。

input =＆gt; 从父4th td child元素的.abc中选择var elems = document.querySelectorAll('.abc td:nth-child(4) input'); [].forEach.call(elems, function(elem) { //To iterate selected elements! elem.addEventListener('click', function() { console.log('Clicked'); }); });元素。

<table>
  <tr class='abc'>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>
      <input>And some text(Not clickable)
    </td>
    <td>Five</td>
  </tr>
  <tr class='abc'>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>
      <input>And some text(Not clickable)
    </td>
    <td>Five</td>
  </tr>
</table>

$("tr.abc").on("click", "td:eq(3) input", function(){
    console.log("click the fourth td")
})

注意：正如评论中所述，请考虑Browser compatibility

Answer 2

我更喜欢使用JQuery。

if (sum==n)

Answer 3

如果您可以使用jQuery，可以尝试使用nth-child()选择器。

语法：

$('.className element:nth-child(x)').whatever()...

你的案子：

$('tr.abc td:nth-child(4)').whatever()...

Answer 4

$( "tr li:nth-child(4)" )将是更多帮助的答案，请参阅jquery的文档。 https://api.jquery.com/nth-child-selector/ 希望这能回答你的问题。

Answer 5

我假设你的班级只有一个，所以我用0索引调用。你想让第4个孩子调用索引3 js数组标准，然后你的input只有一个作为索引0。

var g = document.getElementsByClassName("abc")[0];          
g.children[3].children[0].onclick = function(){
        alert('clicked');
}

如果你的元素不止一个，你可以用for循环迭代......

如何使用类输入元素的第4个子元素？

5 个答案: