标记有序的定义列表 [英] Marking up ordered definition list
问题描述
我正在寻找最有语义正确和理智的方法来标记一个有序的定义列表。我曾考虑过如何使用它。
首先，我在每个列表项中使用了一个有序列表，其中包含2个段落。但后来我想起了定义列表元素。
< dl>
< dt>某事< / dt>
< dd>定义< / dd>
< dt> Something2< / dt>
< dd> Definition2< / dd>
< / dl>
然而，我需要能够通过Javascript以编程方式访问每个定义，我不确定这会工作。
解决这个问题的办法可能是将定义分成不同的 dl 标签。但是这看起来不太好。有没有更正确的方法？或者我假设通过Javascript访问正常定义列表更复杂？
< dt>某事< / dt>
< dd>定义< / dd>
< / dl>
< dl>
< dt> Something2< / dt>
< dd> Definition2< / dd>
< / dl>
然而，因为我需要能够通过Javascript以编程方式访问每个定义，我不确定这会起作用。
只要获得每个定义术语< dt> ，然后在DOM树中获取它旁边的元素，它应该始终是定义描述< DD> 。 jQuery 在这里有很大的帮助。这里有一个 SSCCE ，只需复制'n'paste'n'run它：
<！doctype html>
< html lang =en>
< head>
< title> SO问题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>
I'm looking for the most semantically correct and sane method of marking up an ordered definition list. I have thought about hte following ways of doing it.
First I used an ordered list with 2 paragraphs within each list item. But then I remembered the definition list element.
<dl>
<dt>Something</dt>
<dd>Definition</dd>
<dt>Something2</dt>
<dd>Definition2</dd>
</dl>
However as I need to be able to access each definition programmatically through Javascript I'm not sure that this would work.
The solution to this might be to separate the definitions into different dl tags. But that doesn't look very good at all. Is there a more correct way? Or am I incorrect in assuming that is more complicated to access the "normal" definition list through Javascript?
<dl>
<dt>Something</dt>
<dd>Definition</dd>
</dl>
<dl>
<dt>Something2</dt>
<dd>Definition2</dd>
</dl>
However as I need to be able to access each definition programmatically through Javascript I'm not sure that this would work.
Just get each definition term <dt> and then get the element next to it in the DOM tree, which should always be the definition description <dd>. jQuery is of great help in here. Here's an SSCCE, just copy'n'paste'n'run it:
<!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>
这篇关于标记有序的定义列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
