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到总数加上一个范围内的数字，并更新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＆＃39; .each()函数
对页面上的每个列表项进行迭代
• 将i的值增加1，以便我们可以从1而不是0来计算
• 选择并存储对当前列表项中链接元素的引用，我们将使用jQuery的.find()方法
进行迭代
• 使用jQuery＆＃39; .attr()方法
更新href属性的值
• 最后使用jQuery＆＃39; s i方法
将span标记附加到link元素，其值为.append()