Получить конкретный текст в <a>данных

Question

У меня есть структура кнопок разбивки на страницы, как показано ниже, они построены как DataTable .Как я могу получить текст между тегом <a>?Или я могу добавить id в эти теги

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

Я пытался сделать это:

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

И это дало мне: Prev123Next

Answer 1

$('.paginate_button a') возвращает NodeList набор из каждого элементов, соответствующих критериям выбора.В этом примере каждый элемент <a> имеет родительский элемент .paginate_button, поэтому каждый элемент соответствует.

Если вы хотите выбрать определенный , вы можете просто сослаться на индексNodeList (и используйте .innerText вместо .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>

В качестве альтернативы вы можете использовать селекторы, такие как .first() для нацеливания на отдельные результаты:

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>

Answer 2

Я думаю, вы хотите получить текст кликаемого тега, верно?

Тогда попробуйте этот код

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