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') );
});

FIDDLE

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方法存储该数据。

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

2 个答案: