javascript - 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 计算跨度内的数量并更新 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开始
• 在我们使用 jQuery 的 .find() 方法迭代的当前列表项中选择并存储对链接元素的引用
• 使用 jQuery 的 .attr() 方法更新 href 属性的值
• 最后使用 jQuery 的 .append() 方法将一个 span 标签 append 到链接元素，将 i 的值作为其内容