JSON in rel、jQueryでDOM要素を見つけるのが意味をなさないと思われる

Question

私のプログラムは必要に応じて動作しますが、なぜ動作しているのかを頭で囲むことはできません。私はいくつかの明確化が大好きです。

rel属性にJSONのあるdiv要素があります。具体的には：

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

私は同じページに上記のような多くの多くのdivがあります。

後、私はこのようなジャバスクリプト/ jqueryのを使用して次の要素を見つけようとしています：

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

このコードは私に望ましい結果を提供します---それはJSONのsongIdはRELで10あるdiv要素を見つけます属性...私はそれがなぜ機能するのか分からない！私はもともとrelに番号IDだけを格納していたので、私のJSはrel = 10を探していたのです。 rel属性をJSONに更新しましたが、それでも機能します。

ここで基本的なものはありませんか？ http://api.jquery.com/next

だから、あなたはおそらくちょうどrel="10"です。この要素の前の要素を持っている：

Answer 1

.next()は、-少なくとも二つの要素がある意味直後の兄弟要素を選択します。万一それが当てはまる場合は？あなたのHTML構造はどのように見えますか？

Answer 2

div要素は、現代の任意のHTML仕様書の下で 'のrel' 属性を含むように定義されていません。

HTML 4.01：

• 本部仕様 - 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）：

• 本部仕様 - http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-div-element
• グローバル属性 - http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#global-attributesしたがって

を、div要素の 'のrel' 属性を含め、未定義の動作を意味します。このように 'rel'属性を使用することも意味がありません。この属性は、周囲のコンテンツへのリンクの関係を示すためのものです。実際、 'rel'属性には特定のlist of allowed valuesがあります。

使用する属性はdata-*です。 data-json属性、またはそれよりも説明的なものを含めることができます（例：data-song-info）。

また、属性の場合は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アポストロフィ文字（ '）

を含んではならない、属性値、続い

あなたのJSONがエスケープされた一重引用符を含む場合、例えば'{"foo": "bar\'s"}'の場合、HTML属性値は無効になります。したがって、あなたは未定義の振る舞いに終わります。 JSONエンコーダは代わりに{"foo": "bar's"}を返す必要があります。

属性値に上記で示した要件に加えて、属性値に続けて、リテラルのU + 0022引用符文字（ " ）