I have multiple ul lists like below:
<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>
<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>
This should do it:
$('li').each(function (i) {
i++;
var link = $(this).find('a');
link.attr('href', link.attr('href') + i);
link.append('<span>' + i + '</span>');
});
In the code above we:
.each()
functioni
by 1, so that we can count from 1 instead of from 0.find()
method.attr()
methodi
as its contents using jQuery's .append()
method