jQuery，在DOM中传递变量的最佳实践？

我有一个DOM元素，类似于Facebook的“查看好友”弹出窗口。我有一个包含行列表的表，我可以在其中向这些行添加标记：

<tr id="124"></tr>

它获取PopupWid，但不获取与PopupWid关联的原始元素。我可以构建弹出窗口，以便tr id与之关联：

<div class="popup" id="124">
// everything else is same as before
</div>

这是可行的，但是如果我开始在弹出div中添加元素，这样父节点就不再是父节点了，它就会中断，我必须重写它

任何建议都将不胜感激，但我这样做的方式有一定的“代码气味”。谢谢

---

编辑：简短版本，我有一个row元素，每个元素都与一个唯一的对象关联。我将对象的id作为属性。单击该行元素时，将创建一个（可能）复杂的DOM元素，使用户可以选择与该行元素关联的标记。如果我使用“parentNode”查找单击的行，如果我的设计器经过并向弹出窗口添加元素，则该行将中断。最好的解决方案是什么？将tr行id与类“popup”关联，然后在添加标记时在整个DOM中搜索该类？或者将tr id放在弹出窗口中的所有div元素上，这样即使我的设计器添加了一个新的父元素，id也会传播到它

我不确定您到底遇到了什么麻烦，但至少您可以使用jQuery功能获取ID：

$('.popup-body-row').live('click', function(event) {
     var popupRowId = $(this).attr('id');
     var trRowId = $(this).parent().attr('id');
});

---

我认为将单击行的

id

添加到弹出窗口没有问题。但是不能将其存储为

id

属性，因为它们应该是唯一的。取而代之的是使用HTML5的数据属性，它同样适用于较旧的浏览器

如果您担心

popup

div的重构，那么不要明确依赖

parentNode

关系，而是依赖

popup

类（例如，该类必须在弹出窗口中唯一以消除歧义）或特定属性，这两者必须仅存在于根弹出节点上

以下是我提议的活动流程：

用户单击id为“124”的表行

显示弹出窗口并在其中记录id-

。

单击弹出窗口中的一行时，找到具有属性

数据当前行的最近父行

，并获取其值

将弹出式实时单击处理程序设置为：

$('.popup-body-row').live('click', function() {
    // by searching for closest popup, you break the 
    // explicit parentNode relationship. By storing the data
    // inside an HTML5 data attribute, you are not duplicating id's.
    // Basically, a win-win situation for all.
    var popup = $(this).closest('[data-current-row]');
    var associatedRowId = popup.attr('data-current-row');
});

---

您可以尝试以下方法：

<div class="popup">
  <div class="popup-body-row" id="3434">Add tag 3434</div>
  <div class="popup-body-row" id="2112">Add tag 2112</div>
  //etc.
</div>

$(document).delegate('.popup-body-row', 'click', function(e) {
    var
        me = $(this),
        id = me.attr('id'),
        rowId = me.closest('tr').attr('id');

    // Do something with them
});

---

也许我遗漏了一些东西，但你能更清楚地说明你的问题是什么吗？谢谢，我正在考虑添加一个自定义属性，但当我查看流行的javascript密集型网站时，我注意到很少这样做。有没有理由不添加自定义属性？这似乎是解决这个问题的最好办法。人们有点看不起它，直到HTML5规范将其合法化。现在我们都对它感到满意了，哈哈：）可能是因为XHTML的严格性，尽管大多数页面并没有呈现得很严格，但人们有这种心态。现在HTML5只是想让每个人都玩得开心。是的，出于某种原因，人们不愿意为自定义属性编写自己的XHTML名称空间，原因是w3将数据-*合并到全局名称空间和HTML中。

$('.popup-body-row').live('click', function() {
    // by searching for closest popup, you break the 
    // explicit parentNode relationship. By storing the data
    // inside an HTML5 data attribute, you are not duplicating id's.
    // Basically, a win-win situation for all.
    var popup = $(this).closest('[data-current-row]');
    var associatedRowId = popup.attr('data-current-row');
});

$(document).delegate('.popup-body-row', 'click', function(e) {
    var
        me = $(this),
        id = me.attr('id'),
        rowId = me.closest('tr').attr('id');

    // Do something with them
});