jquery - 如何在jquery中对元素进行绝对编号

Question

我有这样的清单：

<ul id="list">
 <li>Title 1
  <ul>
   <li>Content 1.1</li>
   <li>Content 1.2</li>
   <li>Content 1.3</li>
  </ul>
 </li>
 <li>Title 2
  <ul>
   <li>Content 2.1</li>
   <li>Content 2.2</li>
   <li>Content 2.3</li>
  </ul>
 </li>
</ul>

我想在 li 元素的最后一级添加一个属性值及其索引号，例如 data-number='1' 到 data-number='6'。

li 元素的第一级，即标题所在的位置，应该被忽略。

我尝试了很多这样的事情：

$('ul#list ul li').each(function() {
    $(this).attr('data-number',$(this).index() + 1);
});

但它返回：

• 数据编号='1'
• 数据编号='2'
• 数据编号='3'
• 数据编号='1'
• 数据编号='2'
• 数据编号='3'

我刚刚匹配并添加了属性，我无法将其计数为 1 到 6。

我无法更改 html 标签。

Answer 1

尝试这个：

$('ul#list ul li').each(function(idx) {
    $(this).attr('data-number',idx + 1);
});

Answer 2

如果你想要一个属性值 - 如果你想在某些 CSS 规则中使用该值，那么

$('#list ul li').attr('data-number', function(idx) {
    return idx + 1
});

演示：小提琴

或使用.data()，如果您以后只想在某些脚本中使用该值。稍后可以使用以下方法检索此值$(el).data('number')

$('#list ul li').each(function(idx) {
    $(this).data('number', idx + 1)
});

演示：小提琴

Answer 3

试试看 ：

var dataList = function() {

var ul1 = $("#list").child("ul:first");
var ul2 = $("#list").child("ul:last");

ul1.each(function(idx) {
    $(this).attr('data-number',idx + 1);
});

ul2.each(function(idx) {
    $(this).attr('data-number',idx + 3);
});

}