使用 JQuery 在 HTML 中查找具有特定名称属性或 id 的元素

Find a element with particular name attribute or id in HTML with JQuery

本文关键字：属性 定名称 id 元素 JQuery HTML 查找 使用      更新时间：2023-09-26

我有一个包含几列的表，其中一列是链接，单击它时，我正在调用JQuery单击事件。单击时，我想获取另一列的值，该列是此列 （td） 的同级列。我怎么能得到它。

HTML
<table class="table table-bordered table-hover">
                                        <thead>
                                            <th>RID</th>
                                            <th>Mobile Number</th>
                                            <th>Outlet Name</th>
                                            <th>Place</th>
                                            <th>Email</th>
                                            <th>Balance</th>
                                            <th>Stock</th>
                                            <th>Password</th>
                                        </thead>
                                        <tr>
                                            <td data-name="rid">5111879</td>
                                            <td data-name="mobile">9066587654</td>
                                            <td data-name="outlet">Rachels</td>
                                            <td>Indhiranagar, BL</td>
                                            <td>rach@yahoo.com</td>
                                            <td><i class="fa fa-inr"></i>378665</td>
                                            <td><a href="#" id="retailer_stock">TRANSFER</a></td>
                                            <td><a href="#" id="retailer_reset">RESET</a></td>
                                        </tr>                                                                                                                           
                                    </table>

单击 id=retailer_stock 时，会弹出一个模态，其值应为 data-name='rid'。我应该怎么做。

Javascript
 $('#retailer_stock').click( function(event){
                    console.log($(this));
                    console.log($(event.target).closest('tr').children("[id = 'rid']"));
                    console.log($(this).closest('tr').children("[id = 'rid']"));
                    console.log($(event.target).closest('tr').find("[id = 'rid']"));
                    console.log($(event.target).siblings("[id = 'rid']"));
                    console.log($(this).closest("[id = 'rid']"));
                })

在这些代码行中，最后两行不起作用，它没有为我获取结果，你们中的任何人可以解释为什么吗？

-谢谢

使用：

$('#retailer_stock').click( function(e){
    alert( $(this).closest('tr').children().eq(0).text() )
})

检查演示：小提琴

如果要通过属性访问该单元格data-name请使用：

$('#retailer_stock').click( function(e){
    alert( $(this).closest('tr').find('[data-name="rid"]').text() )
})

但是，如果您计划在表中包含许多行，则最终将得到许多具有相同 retailer_stock id 的元素。为避免这种情况，您可以决定将id="retailer_stock"更改为class="retailer_stock"，然后将选择器更改为$('.retailer_stock')。

使用 jQuery 中的 Click 事件：

https://api.jquery.com/click/

捕获单击"retailer_stock"，然后您可以从"rid"中检索HTML

http://api.jquery.com/html/

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        $('#retailer_stock').click(function (e) {
            alert($(this).closest('tr').find('td[data-name="rid"]').text())
        })
    });
</script>
</head>
<body>
<table class="table table-bordered table-hover">
                                        <thead>
                                            <th>RID</th>
                                            <th>Mobile Number</th>
                                            <th>Outlet Name</th>
                                            <th>Place</th>
                                            <th>Email</th>
                                            <th>Balance</th>
                                            <th>Stock</th>
                                            <th>Password</th>
                                        </thead>
                                        <tr>
                                            <td data-name="rid">5111879</td>
                                            <td data-name="mobile">9066587654</td>
                                            <td data-name="outlet">Rachels</td>
                                            <td>Indhiranagar, BL</td>
                                            <td>rach@yahoo.com</td>
                                            <td><i class="fa fa-inr"></i>378665</td>
                                            <td><a href="#" id="retailer_stock">TRANSFER</a></td>
                                            <td><a href="#" id="retailer_reset">RESET</a></td>
                                        </tr>                                                                                                                           
                                    </table>
</body>
</html>


$('#retailer_stock').click(function(e){
 $(this).parent().find('[data-name="rid"]').text()
});

相关文章：