Question

因此，虽然我的程序正在按预期工作，但我无法理解为什么它正在工作，而且似乎不应该。我希望得到一些澄清。

我有一个div元素，在rel属性中有一些JSON。具体是：

<div class="download_button" rel='{"songId": "10", "listening_to_what": "search"}'></div>

我在同一页面上有很多很多像上面那样的div。

后来我试图使用javascript / jquery找到下一个元素：

var next = $("[rel=10]").next().attr("rel");

这段代码给了我想要的结果---它在rel属性中找到了JSON的songId为10的div ...我不明白为什么它有效！我最初只是在rel中存储了数字ID，这就是我的JS只寻找rel = 10的原因。我将rel属性更新为JSON，它仍然有效。

我错过了一些基本的东西吗？

Answer 1

.next()选择紧随其后的兄弟元素，这意味着至少有两个元素：http://api.jquery.com/next

所以你可能在这个元素之前有一个元素rel="10"。是这样的机会吗？如果不是你的HTML结构是什么样的？

Answer 2

div元素未定义为包含任何现代HTML规范下的'rel'属性：

HTML 4.01：

Div规范 - http://www.w3.org/TR/html4/struct/global.html#h-7.5.4
全局属性 - http://www.w3.org/TR/html4/sgml/dtd.html#coreattrs

HTML 5（HTML）：

因此，在div元素上包含'rel'属性意味着未定义的行为。以这种方式使用'rel'属性也没有意义。此属性用于指示链接与周围内容的关系。实际上，'rel'属性有一个特定的list of allowed values。

您应该使用的属性是data-*属性。您可以添加data-json属性或更具描述性的内容（例如data-song-info）。

此外，您获得了data-*属性enhanced support from jQuery。考虑一下这个HTML：

<div class="srchrslt" data-song-id="10" data-song-name="Stranglehold">
  ...
</div>

然后您可以执行以下操作：

$('.srchrslt').each(function() {
  var $this = $(this);
  console.log('Song id = ' + $this.data('songId'));
});

此外，正如评论中所述，您也可以这样做：

<div class='srchrslt' data-song-data='{"songId": 10, "listening_to_what": "search"}'>
  ...
</div>

$('.srchrslt').each(function() {
  var $this = $(this),
      rsltData = $.parseJSON($this.data('songData'));

  console.log('Song id = ' + rsltData.songId);
});

请注意，我在两个属性上都使用了单引号。从技术上讲，这是一个风格问题，因为specification allows混合了它们。但是，正如我在评论中所提到的，我认为走这条路并不是一个好主意。请注意规范中的此警告：

后跟属性值，除了上面给出的属性值要求外，还不能包含任何文字U + 0027 APOSTROPHE字符（'）

如果您的JSON最终包含转义的单引号，例如'{"foo": "bar\'s"}'，那么您的HTML属性值将无效。因此，您最终会再次遇到未定义的行为。您的JSON编码器需要返回{"foo": "bar's"}。使用双引号会遇到同样的问题：

后跟属性值，除了上面给出的属性值要求外，该属性值不得包含任何文字U + 0022 QUOTATION MARK字符（“）

在jQuery中，使用jQuery查找DOM元素似乎没有意义

2 个答案: