Получить текстовое значение из элемента DOM Speci c

Question

Я пытаюсь получить элемент DOM-ведьмы, содержащий какой-то конкретный c текст, но объект, который я пытаюсь получить, не определен.

Мне нужно получить тег «a» (родительский элемент) тега «span», который содержит текст, хранящийся в переменной «current_id». Current_id ссылается на текст, выданный в теге "t t-esc =" active_kid.id "/>".

<ul class="nav nav-pills flex-column" id="kid_list">
 <li class="nav-item">
  <a t-attf-href="/califications/{{active_kid.id}}" t-attf-class="nav-link active"><t t- 
  esc="active_kid.name"/>
   <span class="badge badge-pill float-right" style="display: none;"><t t-esc="active_kid.id" /> 
   </span>
  </a>
 </li>

var current_id = window.location.pathname.replace('/califications/','');
if (Number.isInteger(parseInt(current_id, 10))){
 var object = $('#kid_list > li > a > span:contains(${current_id})');
 var a = $(object).parentElement;
}

Исходящий HTML код:

<li class="nav-item">
 <a href="/califications/14" class="nav-link">Azure Interior
  <span class="badge badge-pill float-right" style="display: 
  none;">14</span>
 </a>
</li>

Спасибо за чтение!

Answer 1

Чтобы извлечь родительский a элемент span, который содержит текст, соответствующий значению current_id, вы можете использовать комбинацию селектора :contains вместе с closest(). Попробуйте это:

var current_id = '14'; // window.location.pathname.replace('/califications/', '');

var $a = $('span.badge:contains("' + current_id + '")').closest('a');
$a.addClass('foo');

.foo { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="/califications/14" class="nav-link">
      Foo bar
      <span class="badge badge-pill float-right" style="display: none;">12</span>
    </a>
  </li>
  <li class="nav-item">
    <a href="/califications/14" class="nav-link">
      Azure Interior
      <span class="badge badge-pill float-right" style="display: none;">14</span>
    </a>
  </li>
</ul>

Однако, учитывая, что ваш window.location.pathname уже содержит значение, содержащееся в атрибуте href a, вы можете упростить это и просто выберите по атрибуту этого элемента напрямую:

var $a = $('a[href="' + window.location.pathname + '"]');