jquery每个函数循环答案

【问题标题】：jquery each function loopjquery每个函数循环
【发布时间】：2016-12-21 14:41:57
【问题描述】：

我有多个 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 开始计算 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 实现这一点？

【问题讨论】：

标签： javascript jquery loops append each

【解决方案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 标签，其内容为 i

【讨论】：