Question

使用以下代码动态创建锚点时，我有一种非常奇怪的行为：

var newAnchor = $('<a>', {
                    'href': '#',
                    'class': 'seeMoreFromSection load-multi',
                    'offset':'12',
                    'type': '15',
                    'sec': '4'
                }).html('See more');

$('a.seeMoreFromSection').replaceWith(newAnchor);

问题出在名为offset的属性中，导致以下错误：Cannot use 'in' operator to search for 'using' in 12。当我删除行'offset':'12'时，一切正常。我通过在创建锚点后添加此属性来实现它：

$('a.seeMoreFromSection').attr('offset', '12');

但我仍然不明白这是什么问题，是某种保留的话还是什么？

更新：浏览器Google Chrome 33.0.1750.154 m

Answer 1

在documentation中可以看到，您可以使用有效的HTML属性，有效的事件类型和一些jQuery方法（offset()就是其中之一）：

如果传递第二个参数，则第一个中的HTML字符串参数必须表示一个没有属性的简单元素。作为 jQuery 1.4，可以传入任何事件类型，以及下面的jQuery 可以调用方法：val，css，html，text，data，width，height或 offset。

offset，type和sec无论如何都不是有效的HTML属性，因此您不能指望您的工具接受它们。您可以使用data-属性使您的特殊属性有效，或者您可以使用jQuery的data()方法，除非您特别需要将数据存储在HTML属性中（大多数时候情况并非如此））。

Answer 2

offset恰好也是jQuery方法的名称。通过尝试添加该属性，您告诉jQuery设置该元素的偏移并提供不正确的参数。

它期望这样的事情并抛出异常： $（''，{offset：{top：2，left：4}}）

您应该使用data-属性来捕获此类非标准内容。 data-offset将是一种很好的表达方式。

Answer 3

我会使用数据属性而不是创建自己的属性。

var newAnchor = $('<a>', {
                'href': '#',
                'class': 'seeMoreFromSection load-multi',
                'data-offset':'12',
                'type': '15',
                'sec': '4'
            }).html('See more');

$('a.seeMoreFromSection').replaceWith(newAnchor);

可以像这样访问，

$('*[data-offset="12"]');

Answer 4

使用资本抵消...将解决您的问题:)

$(document).ready(function(){
var newAnchor = $('<a>', {
                    'href': '#',
                    'class': 'seeMoreFromSection load-multi',
                    'Offset':'12',
                    'type': '15',
                    'sec': '4'
                }).html('See more');

$('a.seeMoreFromSection').replaceWith(newAnchor);
});

http://jsfiddle.net/YZZ62/

使用名为offset的属性创建锚点

4 个答案: