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

因此，尽管我的程序按预期运行，但我无法理解为什么它会运行，而且它似乎不应该运行。我想澄清一下

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

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

这段代码给出了我想要的结果——它在rel属性中找到了JSON的songId为10的div……但我不明白为什么它能工作！我最初只在rel中存储数字ID，这就是为什么我的JS只查找rel=10。我将rel属性更新为JSON，它仍然可以工作

我是不是错过了一些基本的东西

。接下来选择紧跟其后的同级元素，这意味着至少有两个元素：

所以在这个元素前面可能有一个元素，rel=10。有可能是这样吗？如果不是，您的HTML结构是什么样子的？

div元素没有定义为在任何现代HTML规范下包含“rel”属性：

HTML 4.01：

分区规格- 全局属性- HTML 5 HTML：

分区规格- 全局属性- 因此，在div元素上包含“rel”属性意味着未定义的行为。以这种方式使用'rel'属性也是没有意义的。此属性用于指示链接与周围内容的关系。实际上，“rel”属性有一个特定的属性

您应该使用的属性是属性。您可以包含一个数据json属性，或更具描述性的内容，例如数据歌曲信息

此外，您还可以获得数据-*属性。考虑这个HTML:< /P>

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

此外，如评论中所述，您还可以：

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

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

后跟属性值，除上述属性值要求外，属性值不得包含任何文字U+0027撇号字符'

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

后跟属性值，除上述属性值要求外，属性值不得包含任何文字U+0022引号字符

---

它在这里似乎不起作用，也不应该起作用。我认为在你的代码中有一些东西比你在这里展示的东西更重要。可能使用一个读取元数据的插件，否则你可以使用data songdata={}。在javascript JSON.parse$'div.yourclassname'.data@juzerali是真的，但我认为如果属性很少，那么为每个属性使用一个属性会更干净。

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