Javascript 在foreach循环中遍历HTML-DOM元素

我这里有这段代码

<table>
    <thead>
        <th>Title One</th>
        <th>Title Two</th>
        <th>Title Three</th>
    </thead>
    <tbody>
        <?php foreach ($foos as $foo): ?>
            <tr>
                <td id="x"><?php echo $foo->bar1; ?></td>
                <td id="y"><?php echo $foo->bar2; ?></td>
                <td id="z"><?php echo $foo->bar3; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script type="text/javascript">
    $('#x').on('click', function(){
        console.log($(this).html());
    });
</script>

标题一
标题二
标题三
$（'#x'）。在（'click'，function（）上{
log（$（this.html（））；
});

假设我在那里有10行数据，我如何能够引用我所单击的确切元素？例如第5行，jQuery如何知道我已经单击了第5行？我不能去写

，

，

，

，因为我可能有一千条记录

任何帮助都将不胜感激

$('table').on('click', 'td', function() {
    var rowNumber = $(this).closest('tr').index() + 1;
    var content = $(this).html();
    console.log(rowNumber);
    console.log(content);
});

您不需要通过单击的某种标识来知道，因为jQuery知道您单击的元素与整个DOM的关系

当索引从0开始计数时，确实需要将1添加到row number变量

如果需要知道元素的位置，请使用

.index（）

$('td').on('click',function()
{
    console.log($(this).closest('tr').index())
})

否则

$（此）

将是元素本身。

您可以使用

最近（'tr'）

查找最近的父元素

tr

元素，然后使用

index（）

获取行号。试试这个：

$('td').click(function() {
    var $tr = $(this).closest('tr');
    var rowIndex = $tr.index();
});

---

还请注意，您应该从PHP循环中的

td

元素中删除

id

属性，否则您将复制它们，这是无效的，可能会导致JS或渲染问题。

假设您侦听TDs上的单击，您可以使用

index（）

，获取最接近的祖先TR，只需查看其索引位置在其父级中的位置：

如果行/TDs是动态添加的，请改用on的委派版本：

$('table').on('click', 'td' function(){
    console.log($(this).closest('tr').index());
});

此选项仅在事件发生时应用选择器

注:

• 索引

  返回从0开始的值
• 实际上，您可能并不关心索引值本身，而只关心最近的（'tr'），以便执行其他操作

更新：

如果希望表中有行id，请将其应用于TR元素，以便

<tr data-parent_id="myidhere">

---

如果需要行号，可以使用index函数。最简单的方法是更改click处理程序（假设您希望获取tr中被单击的任何td的索引）。您甚至不再需要在TDs上添加ID：

<tr class = 'clickiness'>
    <td id="x"><?php echo $foo->bar1; ?></td>
    <td id="y"><?php echo $foo->bar2; ?></td>
    <td id="z"><?php echo $foo->bar3; ?></td>
</tr>
<script>
$( document ).ready( function() {
    $( '.clickiness' ).click( function( event ) {
        var $tds = $( this ).children();
        var $clickedTD = $( event.target );
        var clickedIndex = $clickedTD.index( $tds );    // the zero-based index
    });
});
</script>

$（文档）.ready（函数（）{
$（'.clickiness'）。单击（函数（事件）{
var$tds=$（this.children（）；
var$clickedd=$（event.target）；
var clickedIndex=$clickedTD.index（$tds）；//从零开始的索引
});
});

---

我在这里所做的是将click处理程序设置为TR，这样当TR中的任何内容被单击时，函数将运行，然后我使用事件变量获取被单击的实际元素。

$（此）

将保留对单击元素的引用。我可能误解了你的问题。你能说得更具体一点吗？这个不是针对行索引的。示例中没有

LI

是的-对不起-那是我的错。我只是匆匆忙忙地弄了一下索引。我可以修复itUpdated@sterlingarcher，我想我们可以假设OP知道如何处理0个索引行。我不认为他们的字面意思是“如果我点击第五行，我想要一个5”。他们更可能只是想访问行，因此index（）在所有答案上都是多余的：）也许是@TrueBlueAussie，但陈述它不会有什么坏处。同意这一点值得指出（也更新了自己的答案），但是没有必要对它进行补偿：）非常好：）谢谢你使用

这个.id

最初，在你的笔记下，注意2，我想从数据库中获取特定行的id。我应该在哪里放置我的

data-parent\u id

属性？@Richie:Updated。如果你需要更多的细节，请告诉我。。。。哦，在这里的底部是如此孤独。。。提前回答。。。但没有粉丝俱乐部：>

$('table td').on('click', function(){
    var id = $(this).closest('tr').data('parent_id');
});

<tr class = 'clickiness'>
    <td id="x"><?php echo $foo->bar1; ?></td>
    <td id="y"><?php echo $foo->bar2; ?></td>
    <td id="z"><?php echo $foo->bar3; ?></td>
</tr>
<script>
$( document ).ready( function() {
    $( '.clickiness' ).click( function( event ) {
        var $tds = $( this ).children();
        var $clickedTD = $( event.target );
        var clickedIndex = $clickedTD.index( $tds );    // the zero-based index
    });
});
</script>