Jquery 在dl内的每个dd上设置相等的余量

我有一个页面，上面有许多定义列表。我试图将它们显示为一个表，dt浮动在每个dd的左侧

我使用CSS将dt浮动到dd的左侧，并创建了下面的脚本，该脚本计算最宽dt的宽度，并在dd上设置一个等于此宽度加20的左边距

如果页面上只有一个定义列表，那么脚本工作得很好，但是当有多个定义列表时，这些计算将应用于所有定义列表

如何将此计算单独应用于定义列表

这是我的HTML：

<dl class="dl-horizontal">
  <dt>Something</dt>
  <dd>ABC</dd>
  <dt>Something else</dt>
  <dd>DEF</dd>
  <dt>And this</dt>
  <dd>GHI</dd>
</dl>

---

这就是你想要实现的吗？（在下面运行）

var最宽=0；
$（“.dl水平dt”）.each（函数（）{
最宽=Math.max（最宽，$（this.outerWidth（））；
})
$（“.dl水平dd”）.css（'左边距'，最宽+20）；//无需“每个”应用CSS

dl{
边框：蓝色实心1px；
}
dt{
边框：绿色实心1px；
显示：内联；
}
dd{
边框：红色实心1px；
}

某物
基础知识
别的
DEF
还有这个
GHI

将

宽度（最宽）

放在每个内部，不要放在外部谢谢。这很有效。但如果我有多个定义列表，那么这个边距将应用于所有定义列表。有没有一种方法可以分别针对每个列表？的确。我想你可以加一些。如果您不能或不想，请使用

dt:n子项（2）

，

dt:n子项（3）

等。

var widest = 0;

jQuery(".dl-horizontal dt").each(function () { 
    widest = Math.max(widest, jQuery(this).outerWidth()+20); 
}).width(widest);

jQuery(".dl-horizontal dd").each(function () {
    jQuery(this).css('margin-left', widest);
});