为jQuery交互识别元素的最佳方法

假设我有一个项目表，并且我想向每行添加一个按钮以删除该项目。物品来自数据库，因此它们具有唯一的ID。在jQuery函数中，我必须检索所述项目的ID，以便打开确认框并最终将浏览器重定向到删除页面（从不知道安全检查，它是供内部使用的）。为jQuery交互识别元素的最佳方法

在标记中哪里放置ID最好？

来源

2010-02-08 Matteo Riva

这只是我，还是那么简单？

<tr id="cell-8958"><td>..<td><td class="delete">Delete me</td></tr>

...

$('.delete').click(function(){ 
    thisid = $(this).parent().attr('id'); 
    dostuff(); 
});

编辑：或者，如果你想开始编号：

.id { display: none; }

...

<tr><td class="id">cell-8958</td><td>..<td><td class="delete">Delete me</td></tr>

...

$('.delete').click(function(){ 
    thisid = $(this).parent().find('td.id').text(); 
    dostuff(); 
});

P.S .: CSS可能不同，尚未在浏览器中测试过。

答：

来源

2010-02-08 17:23:26

虽然不是SEO友好的=） – Darmen 2010-02-09 17:44:05

“从不安全检查，这是内部使用” - 仔细阅读*：]：D – 2010-02-09 19:53:01

我认为这是更好地把一个id为行的id的一部分：

.... 
<tr id="item_3">...<td>delete tag</td></tr> 
<tr id="item_4">...<td>delete tag</td></tr> 
<tr id="item_5">...<td>delete tag</td></tr> 
....

然后在jQuery的使用简单的regex得到一个ID。

更新：或者，只需将其放入rel属性的删除按钮/锚点。

更新2：由于正则表达式可能会降低jQuery在这种情况下的性能，请尝试将id的值设为rel每行的属性。

来源

2010-02-08 16:37:12 Darmen

在这种情况下，我将使用什么选择器来识别“delete”单元？给他们一个班，然后从他们的父母那里获取ID？ – 2010-02-08 16:51:48

@kemp是的，但你应该从父母的父母身上取得一个'id' :) – Darmen 2010-02-08 16:54:58

'rel'是一个有趣的解决方案，它的任何价值都是有效的吗？ – 2010-02-08 17:22:51

给每个项目一个唯一的ID。 '＃'选择器工作得最快，因为它映射到原生的javascript方法。

来源

2010-02-08 16:37:41

只需添加一个：ID必须以字母开头。更多信息在http://www.w3.org/TR/html401/types.html#type-name – Darmen 2010-02-08 16:48:30

以及我可以给他们一个唯一的ID，但我不能使用'＃'选择器，除非我想为每个项目编写一个函数。我将不得不将它们作为 - 包含它们的表格的后代来访问它们。这是正确的吗？ – 2010-02-08 16:56:05

你不需要使用ID选择器，你可以使用'$（'button'）。closest（'tr'）'来选择父行。 – Rowan 2010-02-08 17:11:37

将它放入<tr>元素是有意义的，因为这是保存与此项目相关的所有数据/标记的项目。如果您事先知道删除按钮是与唯一ID进行交互的唯一元素，那么将其添加到按钮本身会稍微快捷一些。

来源

2010-02-08 16:37:58

-7

我宁愿用DIV布局而不是表

来源

2010-02-08 16:43:52 Drakiula

-1没有掩盖问题。这显然是表的语义上有效的用例。 – 2010-02-08 16:47:17

这是为什么？我们不能再使用表格来处理来自数据库表格的数据吗？ – 2010-02-08 16:47:39

问题是如何找到最适合物品识别的地方，这不是在这种情况下应该使用哪种标记标签。 – Darmen 2010-02-08 16:50:08

你应该把它周围的删除按钮在窗体上：

<tr>...<td><form action="delete.htm?id=001"><input type="submit">Delete</input></form></td></tr>

我意识到，这似乎有点重量级的，但这个工程没有JavaScript，这总是最佳做法。

来源

2010-02-08 16:54:51 graphicdivine

非JS支持的好处，可以通过确认模式和Ajax进行增强。 – Rowan 2010-02-08 19:04:37

有几种方法可以实现这一点。

首先，尝试jQuery meta plugin。这允许您将JSON数据嵌入到元素的class属性中。它验证并不影响应用于元素的类。您的TR看起来是这样的：

<tr class="some-class {uid:'12345', asMuchDataAsYouLike}">

或者（如果你不介意使用HTML5），使用数据属性（here，here）：

<tr data-uid="12345">

注：这将验证为HTML5如果您使用正确的DocType（<!DOCTYPE html>）。

编辑（例如使用）：

HTML：

<tr data-uid="12345"> 
    <td>Some Data</td> 
    <td><button class="delete">Delete</button></td> 
</tr>

的Javascript：

$('button.delete').click(function(){ 
    // obviously you'd do something different with the data ;) 
    alert($(this).closest('tr').attr('data-uid')); 
    });

来源

2010-02-08 17:09:57 Rowan

我认为你的意思是这个插件：http://docs.jquery.com/Plugins/Metadata/metadata – 2010-02-08 17:21:07

糟糕，谢谢 – Rowan 2010-02-08 17:25:27

对于这个特定的情况有点矫枉过正，但是非常有趣的替代解决方案，谢谢 – 2010-02-08 17:56:04

没有测试，但假设你正在使用jQuery 1.3+

$(this).closest('tr').attr('id');

应该为您提供您点击的行的ID（注意您在构建表时必须先为该行提供一个ID。

来源

2010-02-08 17:13:38

为jQuery交互识别元素的最佳方法

回答

相关问题