Доступ к тексту объекта Span

Question

Итак, у меня на моей веб-странице есть ul, аналогичные приведенной ниже, и я пытаюсь пройти l oop через каждую из них, чтобы захватить диапазон внутри li. Ниже приведен пример того, как это отображается в моем HTML:

<ul id="item-NineAM" class="list-group">
<li class="list-group-item w-100 border-dark past">
<span class="badge badge-dark" id="item-time">09:15 AM</span>
<p class="m-1 w-75 item-text">fsda</p>
<button class="btn btn-danger" id="trashCan"><span class="oi oi-trash"></span></button></li>
</ul>

Я установил интервал для захвата диапазона с id # item-time и передачи его в мою функцию аудита

const listGroup = $(".card .list-group li #item-time");
    $.each(listGroup, function(i, itemSpan){
         console.log(itemSpan)
          auditItem(itemSpan)
    })

Я проверил в консоли, что диапазон передается в функцию, но я не могу получить его текст.

<span class="badge badge-dark" id="item-time">09:15 AM</span>

Мне нужно получить время, которое находится внутри пролет. Моя консоль сообщает мне, что это объект. Любые идеи? Я пробовал .text () и .inner HTML, но не повезло.

Спасибо!

Answer 1

Селектор jquery, который вы назначаете listGroup, должен быть довольно общим, поэтому вы не должны включать идентификатор, так как получите только одно совпадение.

Похоже, вы неправильное использование id. Помните, что у вас может быть только один экземпляр id, и его следует использовать только для обозначения уникальности. Вместо этого вы хотите, чтобы item-time был классом, поскольку у вас может быть несколько экземпляров классов.

Я также исправил некоторые другие в вашем html.

const listGroup = $(".list-group li span.item-time");
    $.each(listGroup, function(){
         console.log($(this).text())
          //auditItem(itemSpan)
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group item-NineAM">
  <li class="list-group-item w-100 border-dark past">
    <span class="badge badge-dark item-time">09:15 AM</span>
    <p class="m-1 w-75 item-text">fsda</p>
    <button class="btn btn-danger trashCan">
      <span class="oi oi-trash"></span>
    </button>
  </li>
</ul>