Question

我有一个图片库，其中图库中的每个项目都有一个唯一的ID，我用它将它绑定到我的后端，以便我可以运行数据库操作等。我正在使用数据属性来保存'例如，imageid'在每个图像的父div上：data-imageid =“168”

图片库项目有很多嵌套的div，所以在翻转/点击时我发现自己做了很多以下的操作：

$(this).parent().parent().attr('data-imageid');

它不像一个干净的解决方案或最好的性能明智。其他人如何处理这个问题？什么是最好的解决方案？无论解决方案是什么，这都必须是每天解决的问题。

编辑：我意识到我的主题是模糊的，但它进一步解释了我对这个问题的看法。

Answer 1

这听起来很可疑，就像你有divitis的情况一样。在任何情况下，您都可以使用.parents([selector])和过滤器来使您的代码更简洁。 e.g。

$(this).parents(".classOfDivContainingData").attr('data-imageid');

或者您可以在初始加载时循环遍历父div，并将data属性复制到示例中的“this”。有没有理由不能在这里首先设置属性？

Answer 2

你可以指定一个“最多”的标准，所以如果你想要去最近的div或li或者其他什么，可以使用jQuery的 .closest（）或一个简单的 upTo（）功能：

function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  var el;
  do {
    el = el.parentNode;
    if (el && el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  } while (el)
}

Answer 3

你可以试试这个

$(this).parents("[data-imageid]:first");

Answer 4

我建议你对元素使用其他属性：

<div data-imageid="367">
    <div>
        <div data-parent-imageid="367">
        </div>
    </div>
</div>

所以你可以只知道触发事件的元素。使用此解决方案，您不必关心元素的结构，在DOM树中自由移动它们，性能也会得到改善。

关于Dom对象作为Javascript中值对象的抽象问题

4 个答案: