I have a pagination button structure like below, they are constructed by DataTable. How can I get the text between the <a> tag? Or can I add id into these tag

    <ul class="pagination">
    <li class="paginate_button previous disabled" aria-controls="test" tabindex="0" id="test_previous">
        <a href="#">Prev</a>
    </li>
    <li class="paginate_button" aria-controls="test" tabindex="0">
        <a href="#">1</a>
    </li>
    <li class="paginate_button" aria-controls="test" tabindex="0">
        <a href="#">2</a>
    </li>
    <li class="paginate_button" aria-controls="test" tabindex="0">
        <a href="#">3</a>
    </li>
    <li class="paginate_button next disabled" aria-controls="test" tabindex="0" id="test_next">
        <a href="#">Next</a>
    </li>
</ul>

I tried to do this:

var newText = $('.paginate_button a').text();
console.log(text);

And it gave me: Prev123Next

2 Answers

1
Community On Best Solutions

I think you want to get the text of clicked tag, right?

Then try this code

$('body').on('click', '.paginate_button a', function(e){
    console.log($(this).text());
});
2
Obsidian Age On

$('.paginate_button a') returns a NodeList collection of each of the elements which match the selection criteria. In this example, every <a> element has a parent .paginate_button element, so each element is matched.

If you want to select a specific one, you can simply reference the index of the NodeList (and make use of .innerText instead of .text()):

var newText = $('.paginate_button a')[0].innerText;
console.log(newText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="pagination">
  <li class="paginate_button previous disabled" aria-controls="test" tabindex="0" id="test_previous">
    <a href="#">Prev</a>
  </li>
  <li class="paginate_button" aria-controls="test" tabindex="0">
    <a href="#">1</a>
  </li>
  <li class="paginate_button" aria-controls="test" tabindex="0">
    <a href="#">2</a>
  </li>
  <li class="paginate_button" aria-controls="test" tabindex="0">
    <a href="#">3</a>
  </li>
  <li class="paginate_button next disabled" aria-controls="test" tabindex="0" id="test_next">
    <a href="#">Next</a>
  </li>
</ul>

Alternatively, you can make use of selectors such as .first() to target individual results:

var newText = $('.paginate_button a').first().text();
console.log(newText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="pagination">
  <li class="paginate_button previous disabled" aria-controls="test" tabindex="0" id="test_previous">
    <a href="#">Prev</a>
  </li>
  <li class="paginate_button" aria-controls="test" tabindex="0">
    <a href="#">1</a>
  </li>
  <li class="paginate_button" aria-controls="test" tabindex="0">
    <a href="#">2</a>
  </li>
  <li class="paginate_button" aria-controls="test" tabindex="0">
    <a href="#">3</a>
  </li>
  <li class="paginate_button next disabled" aria-controls="test" tabindex="0" id="test_next">
    <a href="#">Next</a>
  </li>
</ul>