Сравните значение текста тега с переменной в jquery

Question

Я пытаюсь сравнить значение тега, полученного селектором запросов в DOM, с заданной переменной.

До сих пор мне удавалось использовать только функцию «содержащий», но мне нужно сравнить с функцией равенства. Элемент DOM, который мне нужно получить, это «span: badge», а переменная для сравнения - «current_id».

Это код, который мне нужно изменить:

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

JS :

$(document).ready(function() {
  "use strict";
    var current_id = window.location.pathname.replace('/califications/','');
    if (Number.isInteger(parseInt(current_id, 10))){
        var $a = $('span.badge:contains("' + current_id + '")').closest('a');
        $($a).addClass('active');
    }else{
        $('#middle_column > div > h1').html("No kid selected");
    }
});

HTML:

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

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

Answer 1

Вы можете использовать селектор, который содержит атрибут t-attf-href и заканчивается идентификатором

$(`[t-attf-href$="${current_id}"]`).addClass('active');

Пример:

var id = 'kid_id';

$(`[t-attf-href$="${id}"]`).addClass('active').text('test');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a t-attf-href="/califications/kid_id" t-attf-class="nav-link"><t t-esc="kid.name"/>
  <span class="badge badge-pill float-right" style="display: none;"><t t-esc="kid.id" /></span>
</a>

Примечание: деталь .text('test') предназначена только для тестирования

Answer 2

Решение проблемы найдено.

var current_id = window.location.pathname.replace('/califications/','');
    if (Number.isInteger(parseInt(current_id, 10))){
        var $b = $('span.badge');
        $b.each(function( index ) {
            var badge_value = $( this ).text();
            if (badge_value == current_id){
                var active_a = $( this ).closest('a');
                $(active_a).addClass('active');
            }
        });
    }else{
        $('#middle_column > div > h1').html("No kid selected");
    }

Спасибо за все ответы!

Answer 3

Использовать contains кажется правильным, но вам нужно делать дальше, потому что contains также соответствует aa и ab, если вы ищете a.

const $badges = $('span.badge:contains(`${current_id}`)');
const targetEl = null
$badges.each((i, e)=>{
  if(e.text() === current_id){
     targetEl = e.
  }
})

targetEl должно быть то, что вам нужно, или вы также будете делать targetEl.closet("a"), если вы хотите получить a.