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?

• javascript
• jquery

• 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 2

pure 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')