JS - Добавить класс к ссылке, содержащей определенное слово - PullRequest
1 голос
/ 28 апреля 2020

Я пытаюсь использовать Jquery, чтобы добавить класс ко всем ссылкам, которые содержат определенное ключевое слово "ключевое слово". Любая помощь будет высоко ценится

$(document).ready(function(){   
        $('.list').each(function(){
            var $this = $(this);
            if($this.text().indexOf('Keyword') > -1)
                $this.closest('.list a').addClass('selected-link')
            })  
         })
.selected-link {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="list">
<li><a href="#">Keyword</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>

Ответы [ 3 ]

1 голос
/ 28 апреля 2020

Вам нужно найти внутренний тег li, так как $this.find('a'), $this.text() является содержимым тега li

$(document).ready(function(){   
        $('.list').each(function(){
            var $this = $(this);
            if($this.find('a').text().indexOf('Keyword') > -1)
                $this.find('a').addClass('selected-link')
            })  
         })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="list">
<li><a href="#">Keyword</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
0 голосов
/ 28 апреля 2020

Полагаю, вы ищете это?

$(document).ready(function()
  {   
  document.querySelectorAll('.list a').forEach(el=>
    {
    if (/Keyword/.test(el.textContent) )
      { el.classList.add('selected-link') } 
    })
  })
.selected-link {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="list">
<li><a href="#">Keyword</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
0 голосов
/ 28 апреля 2020

Итерируйте вместо .list a s - <a> s, которые являются потомками от .list:

$('.list a').each(function() {
  var $this = $(this);
  if ($this.text().indexOf('Keyword') > -1) {
    $this.addClass('selected-link');
  }
});
.selected-link {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="#">Keyword</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
</ul>

Обратите внимание, что нет необходимости в большой библиотеке, такой как jQuery, для чего-то такого тривиального, это просто сделать sh в ванили JS:

for (const a of document.querySelectorAll('.list a')) {
  if (a.textContent.includes('Keyword')) {
    a.classList.add('selected-link');
  }
}
.selected-link {
  color: red;
}
<ul class="list">
  <li><a href="#">Keyword</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...