Question

我有以下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操作，可访问性等

Answer 1

从广义上讲，我建议将数据存储在最接近数据的“父”或“所有者”的元素上。这就是传达最有意义的东西。

例如，如果您在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>

您可能希望将ISO8601日期时间表示作为dob类元素的数据包含在内。

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

Answer 2

虽然html5数据属性是主观的，并且可以随时随地使用，但我假设您在他们的情况下正在查看这些元素。在你的情况下，我将它们放在你所做的同一个地方有几个原因。

这是顶级（孩子），所以通过data属性抓取它们非常容易。 $('li[data-value]')
在某些时候，每个<li>内部可能包含更多内容，现在它可能只是<span>，但是通过让list-item保存数据值，您可以轻松获得其中的其他DOM元素。如果你在跨度中有它，你必须在列表项上升一个级别，然后.find（）你想要的任何元素。

如果您的 span 持有数据值：

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

相反，现在你不必为父母<li>进行毫无意义的查找！

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

Answer 3

我想说将数据值放在列表中的范围内。我认为最好将data-attribute放在最接近它有效的字符串上，在本例中是span。

另一方面，这段jQuery工作正常：

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

有了这个，我已经在jsFiddle（http://jsfiddle.net/YqePE/）中测试过点击li，可以返回它的文本值，所以它也会返回你所拥有的任何数据属性李。

但是，如果通过某种奇怪的CSS化妆，这可能会产生一个不受欢迎的结果，你认为你没有点击某个LI，浏览器认为你这样做。为了防止这种情况，您需要使跨度保持数据属性。

Answer 4

从你想要做的事情来看。你可以使用jQuery的.index()。（是的，我知道它没有被标记为jQuery）

$('ul.dropSelect > li').each(function(){
  var i = $(this).index();
});

Answer 5

没有必要使用数据属性来获取此信息。

尝试使用CSS或jQuery的伪类选择器来绑定指定项：

CSS：

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

或jQuery：

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

DEMO：http://jsfiddle.net/wYpK6/

HTML5数据值属性的最佳位置？

5 个答案: