jQuery 计算子 div

Question

<ul>
    <li class="title" data-count="1" data-time="9000" data-title="unicorn">
    <li class="title" data-count="2" data-time="2000" data-title="giraffe">
    <li class="title" data-count="3" data-time="3000" data-title="dog">
    <li class="title" data-count="4" data-time="7000" data-title="cat">
    <li class="title" data-count="5" data-time="1000" data-title="dinosaur">
</ul>

如您所见，data-count="/" 只是一个计数器。你有什么想法用 jQuery 来自动化这个吗，我没有任何想法。谢谢大家的回答。

我认为变量可以像这样工作：

var DivCount = X
$('.title').attr('data-count', DivCount);

PS: 我不求免费代码，欢迎提出建议！

Answer 1

清洁一个...

for(var i = 1; i <= $('.title').length; i++) {
    $('.title').attr('data-count', i);
}

...另一个...

$('.title').each(function(i, element) {
    $(element).attr('data-count', i + 1);
});

注意使用节点名称作为选择器，以防您有其他列表。

Answer 2

您可以使用 lenght 属性来计算 div 中有多少个元素：

console.log($("ul > li.title").length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="title" data-count="1" data-time="9000" data-title="unicorn">
    <li class="title" data-count="2" data-time="2000" data-title="giraffe">
    <li class="title" data-count="3" data-time="3000" data-title="dog">
    <li class="title" data-count="4" data-time="7000" data-title="cat">
    <li class="title" data-count="5" data-time="1000" data-title="dinosaur">
</ul>

Answer 3

试试这个：

var a = $("ul li");

jQuery.each(a, function(i, v) {
  $(v).attr("data-count", i + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="title" data-time="9000" data-title="unicorn">A</li>
    <li class="title" data-time="2000" data-title="giraffe">B</li>
    <li class="title" data-time="3000" data-title="dog">C</li>
    <li class="title" data-time="7000" data-title="cat">D</li>
    <li class="title" data-time="1000" data-title="dinosaur">E</li>
</ul>

jQuery.each

的文档

Answer 4

可以直接查看

$('li.title').length

它将给你 li class 'title' count

jQuery 计算子 div

jQuery count child divs

jquery

numbers

count

custom-data-attribute