Question

我正在寻找标记有序定义列表的最语义正确且理智的方法。我已经考虑过如何做到这一点。

首先，我使用了每个列表项中包含2个段落的有序列表。但后来我想起了定义列表元素。

<dl>
  <dt>Something</dt>
  <dd>Definition</dd>

  <dt>Something2</dt>
  <dd>Definition2</dd>
</dl>

然而，因为我需要能够通过Javascript以编程方式访问每个定义，所以我不确定这是否有效。

解决方法可能是将定义分成不同的dl标记。但这看起来并不是很好。有更正确的方法吗？或者我错误地认为通过Javascript访问“普通”定义列表更复杂？

<dl>
  <dt>Something</dt>
  <dd>Definition</dd>
</dl>
<dl>
  <dt>Something2</dt>
  <dd>Definition2</dd>
</dl>

Answer 1

但是因为我需要能够通过Javascript以编程方式访问每个定义，所以我不确定这是否可行。

只需获取每个定义术语<dt>，然后在DOM树中获取它旁边的元素，它应该始终是定义描述<dd>。 jQuery在这里有很大的帮助。这是一个SSCCE，只是复制'n'paste'n'run它：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2172138</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#dl dt').each(function(i, dt) {
                    dt = $(dt);
                    dds = dt.nextAll().map(function() { return $(this).is('dd') ? this : false; });
                    alert(dt.text() + " = " + dds.text());
                });
            });
        </script>
    </head>
    <body>
        <dl id="dl">
            <dt>Term1</dt><dd>Desc1a</dd><dd>Desc1b</dd>
            <dt>Term2</dt><dd>Desc2a</dd>
            <dt>Term3</dt><dd>Desc3a</dd><dd>Desc3b</dd>
        </dl>
    </body>
</html>

Answer 2

使用名称和ID。

<dl id="1">

的document.getElementById（ “1”）;

https://developer.mozilla.org/En/DOM/Document.getElementById

标记有序定义列表

2 个答案: