[英]JS - Add Class to link that contains a certain word
I'm trying to use Jquery to add a class to all links which contain a certain keyword "keyword".我正在尝试使用 Jquery 将 class 添加到包含某个关键字“关键字”的所有链接。 Any help would be much appreciated
任何帮助将非常感激
$(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>
You need find a inside li tag as $this.find('a')
, $this.text()
is content of li tag您需要找到一个内部 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>
Iterate over the .list a
s instead - the <a>
s which are descendants from the .list
:而是迭代
.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>
Note that there's no need for a big library like jQuery for something this trivial, this is easy to accomplish in vanilla JS:请注意,对于这种微不足道的事情,不需要像 jQuery 这样的大型库,这在 vanilla 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>
I suppose you are looking for this?我想你正在寻找这个?
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.