1

私は次のHTMLを持っています:

<ul class='dropSelect'>
    <li data-value="one">
        <span>Menu1</span>
    </li>
    <li data-value="two">
        <span>Menu2</span>
    </li>
    <li data-value="three">
        <span>Menu3</span>
    </li>
</ul>

私の質問は、データ値属性を実際のメニュー項目テキストの隣のスパンに配置する方が良い方法liですか、それとも私が行ったように親要素に配置するのと同じくらい良いですか? この属性は Web サービスからデータを受け取ります。いくつかの js を使用してこの属性の値を取得し、それをページの別の要素内に配置しています。

SOF は、この質問を投稿する際に、主観的すぎるかもしれないと警告しました...そしてそうかもしれません...しかし、私の懸念は、この属性の配置が UI エンジニアリング、javascript DOM 操作、アクセシビリティなど

4

5 に答える 5

2

大まかに言えば、データの「親」または「所有者」に最も近い要素にデータを格納することをお勧めします。それはすべて、最も意味を伝えるものについてです。

たとえば、html で「人」のリストを表している場合、次のようになります。

<ul>
    <li class="person">Tim Bresnan</li>
    <li class="person">Joe Root</li>
</ul>

生年月日を表示せずに関連付けたい場合は、人物を表すアイテムに付けますli。

$('.person').data('dob');

ただし、人物の HTML 表現がより複雑な場合は、

<ul>
    <li class="person">
        <div class="name">Tim Bresnan</div>
        <div class="dob">28th Feb 1985</div>
    </li>
    <li class="person">
        <div class="name">Joe Root</div>
        <div class="dob">30th Dec 1990</div>
    </li>
</ul>

dobISO8601 日時表現をクラス要素のデータとして含めたい場合があります。

$('.person .dob').data('dob');
于 2012-08-30T18:17:01.407 に答える
1

html5データ属性は主観的であり、いつでもどこでも使用できますが、状況に応じてこれらの要素を調べていると思います。あなたの状況では、いくつかの理由であなたがしたのと同じ場所にそれらを置きます。

  • これは最上位（子）であるため、data属性によってすべてを取得するのは非常に簡単です。 $('li[data-value]')

  • ある時点で、それぞれの中にもっと多くのものがある<li>かもしれませんが、今はそれだけかもしれませんが<span>、list-itemにデータ値を保持させることで、その中に他のDOM要素を簡単に入れることができます。スパン内にある場合は、list-itemのレベルを上げてから、必要な要素を.find（）する必要があります。

スパンがデータ値を保持している場合：

$('[data-value="whatever"]').closest('li').find('.someOtherThing');

代わりに、親を無意味に検索する必要はありません<li>。

$('[data-value="whatever"]').find('.someOtherThing');

于 2012-08-30T18:12:11.060 に答える
1

リスト内のスパンにデータ値を入れると思います。data-attribute は、影響を受ける文字列 (この場合はスパン) に最も近い場所に配置するのが最善だと思います。

別の注意として、この jQuery は正常に動作します。

$(document).ready( function() {
    $("li").click(function(){
       var txt = $(this).text();
       $("#mydiv").text(txt);
    });
});

これにより、li をクリックするとテキスト値が返されることを jsFiddle (http://jsfiddle.net/YqePE/) でテストしたので、その li に含まれるデータ属性も返されます。

しかし、ある種の変な CSS 構成によって、これが望ましくない結果を生み出す可能性があります。つまり、特定の LI をクリックしないと思うと、ブラウザーはクリックしたと見なします。これを防ぐには、データ属性を保持するスパンを作成する必要があります。

于 2012-08-30T18:13:43.467 に答える
0

この情報にdata属性を使用する必要はありません。

CSSまたはjQueryの疑似クラスセレクターを使用して、特定のアイテムをバインドしてみてください。

CSS：

.dropSelect li:nth-child(1) {
  // First <li>
}

またはjQuery：

// Second <li>
$('.dropSelect li').eq(1)

デモ：http：//jsfiddle.net/wYpK6/

于 2012-08-30T18:17:52.510 に答える
0

あなたがやろうとしているように見えるものから。jQuery の.index(). (はい、jQuery のタグが付けられていないことはわかっています)

$('ul.dropSelect > li').each(function(){
  var i = $(this).index();
});
于 2012-08-30T18:15:03.107 に答える