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
});

演示：Fiddle

或使用.data()，如果您想稍后仅在某些脚本中使用该值。稍后可以使用$(el).data('number')

检索此值

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

演示：Fiddle

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);
});

}

如何在jquery中使用绝对数字元素

3 个答案: