I have a pagination for browsing older posts. I need to change it's text using jquery or js. (pagination generated in laravel package so can't edit text directly)
So I tried with finding rel and replace text. But no luck. This is my code.
$(".older-posts").find("li[rel='next']").html("Older posts");
<script src=".1.1/jquery.min.js"></script>
<div class="older-posts">
<ul class="pagination">
<li>
<a href="http://localhost/pages/blog?page=1" rel="prev">« Previous</a>
</li>
<li class="disabled"><span>Next »</span></li>
</ul>
</div>
I have a pagination for browsing older posts. I need to change it's text using jquery or js. (pagination generated in laravel package so can't edit text directly)
So I tried with finding rel and replace text. But no luck. This is my code.
$(".older-posts").find("li[rel='next']").html("Older posts");
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="older-posts">
<ul class="pagination">
<li>
<a href="http://localhost/pages/blog?page=1" rel="prev">« Previous</a>
</li>
<li class="disabled"><span>Next »</span></li>
</ul>
</div>
Any idea?
Share Improve this question edited Nov 15, 2017 at 11:21 Janath asked Nov 15, 2017 at 11:18 JanathJanath 1,2486 gold badges28 silver badges61 bronze badges 2-
2
Your HTML has no
span[rel="next"]
element – Rory McCrossan Commented Nov 15, 2017 at 11:19 -
you could use contains
.find("span:contains('Next')")
– Pete Commented Nov 15, 2017 at 11:25
2 Answers
Reset to default 6pure js solution:
Please Note: querySelectorAll returns an array, so position of li matters; if u change position of "prev" li , then this code might behave naughty.
Cheers
document.querySelectorAll('[rel="prev"]')[0].innerHTML = "Older posts";
Approach 2:
If you feel that above code is inplete for the reason I mentioned, use this approach instead
var lists = document.querySelectorAll("li")
var filteredList = Array.prototype.filter.call(lists,function(node) { return node.innerHTML.includes("Previous"); });
filteredList[0].innerHTML = "Older posts";
$('[rel="prev"]').text('your text here')