jquery 每个函数循环

Question

我有多个 ul 列表，如下所示：

<ul>
    <li><a href="#page/"></a></li>
    <li><a href="#page/"></a></li>
    <li><a href="#page/"></a></li>
    <li><a href="#page/"></a></li>
    <li><a href="#page/"></a></li>
</ul>

<ul>
    <li><a href="#page/"></a></li>
    <li><a href="#page/"></a></li>
    <li><a href="#page/"></a></li>
</ul>

<ul>
    <li><a href="#page/"></a></li>
    <li><a href="#page/"></a></li>
</ul>

我想计算 li 的总数并从 1 加到 total 计算一个 span 内的数量并更新 a 的 href 标签如下：

<ul>
    <li><a href="#page/1"><span>1</span></a></li>
    <li><a href="#page/2"><span>2</span></a></li>
    <li><a href="#page/3"><span>3</span></a></li>
    <li><a href="#page/4"><span>4</span></a></li>
    <li><a href="#page/5"><span>5</span></a></li>
</ul>

<ul>
    <li><a href="#page/6"><span>6</span></a></li>
    <li><a href="#page/7"><span>7</span></a></li>
    <li><a href="#page/8"><span>8</span></a></li>
</ul>

<ul>
    <li><a href="#page/9"><span>9</span></a></li>
    <li><a href="#page/10"><span>10</span></a></li>
</ul>

如何使用 jquery 实现此目的？

Answer 1

应该这样做：

$('li').each(function (i) {
    i++;
    var link = $(this).find('a');
    link.attr('href', link.attr('href') + i);
    link.append('<span>' + i + '</span>');
});

在上面的代码中我们：

使用 jQuery 的 .each() 函数遍历页面上的每个列表项
将i的值加1，这样我们就可以从1开始计数，而不是从0开始计数
Select 并在我们使用 jQuery 的 .find() 方法迭代的当前列表项中存储对 link 元素的引用
使用 jQuery 的 .attr() 方法更新 href 属性的值
最后使用 jQuery 的 .append() 方法向 link 元素附加一个 span 标签，将 i 的值作为其内容

jquery 每个函数循环

jquery each function loop

javascript

each

jquery

loops

append