jquery - 如何通过 $.map 向 DOM 元素添加属性

Question

嗯...我在这里做错了什么？

我有一个这样的html结构：

<ul>
  <li>
    <a href="#">Link</a>
    <ul> ... </ul>
  </li>
  <li>
    <a href="#">Link</a>
    <ul> ... </ul>
  </li>
  <li>
    <a href="#">Link</a>
    <ul> ... </ul>
  </li>
  ...
</ul>

我想将“目标列表”作为属性添加到所有链接

var $links = $('a');

$.map($links, function(link, i){
  link.$targetList = $(link).next();
});

$links.click(function() {
  console.log($(this).$targetList);
});

但是，单击会返回“未定义”

Answer 1

$.map不是要添加属性，它会构建一个你传回的数组映射。

jQuery 有一种data()将任意数据附加到 jQuery 对象的方法，您甚至可以在其中存储另一个元素data()（这是next()获取的，DOM 中的下一个元素）：

var $links = $('a');

$links.each(function(_, link) {
    $(link).data('targetList', $(link).next());
});

$links.click(function() {
    console.log( $(this).data('targetList') );
});

小提琴

Answer 2

您需要在 dom 节点上访问它，而不是访问 jQuery 集合上的属性。

var $links = $('a');

$.map($links, function(link, i){
  link.$targetList = $(link).next();
});

$links.click(function() {
  console.log(this.$targetList);/*This is what i changed*/
});

虽然我可能会按照adeneo的建议使用.data方法存储这些数据。