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我的问题是：将 data-value 属性放在实际菜单项文本旁边的跨度上是更好的做法，还是像我所做的那样放在父元素上一样好？此属性将从 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>

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

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

尽管 html5 数据属性是主观的，并且可以随时随地使用，但我假设您正在根据您的情况查找这些元素。在您的情况下，出于几个原因，我会将它们放在与您相同的位置。

  • 这是顶层（子级），因此很容易通过 data 属性将它们全部抓取。 $('li[data-value]')

  • 在某些时候，你可能在 each 里面有更多<li>，现在它可能只是，<span>但是通过让 list-item 保存数据值，你可以轻松地在其中获取其他 DOM 元素。如果您将它放在跨度内，则必须将其升级到列表项，然后 .find() 任何您想要的元素。

如果您的跨度持有数据值：

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

相反，现在您不必为 parent 进行无意义的查找<li>！

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

于 2012-08-30T18:12:11.060 回答
1

我想说将数据值放在列表中的范围内。我认为最好将数据属性放在最接近它所影响的字符串的位置，在这种情况下是跨度。

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

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

有了这个，我在 jsFiddle (http://jsfiddle.net/YqePE/) 中测试了点击一个 li，可以返回它的文本值，所以它也会返回你在那个 li 中的任何数据属性。

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

于 2012-08-30T18:13:43.467 回答
0

从看起来你正在尝试做的事情来看。你可以使用 jQuery 的.index(). （是的，我知道它没有标记 jQuery）

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

不必为此信息使用数据属性。

尝试使用 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 回答