如果子元素包含某些字符串链，如何更改父元素的 CSS class

Question

I'm really new at this and I'm making my first question. So I've made a newsletter based website in Wordpress with Campaign Monitor integrated.

The below script displays basic HTML, a ul with some li elements that have an anchor inside, like this example:

...

<ul>
  <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">First Newsletter Title</a>, 11 December 2020</li>
  <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">Second Newsletter Title</a>, 12 December 2020</li>
  <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">Third Newsletter Title</a>, 13 December 2020</li>
</ul>

...

So I made my shot by trying to use JavaScript to make a function that:

• Selects the anchor tags that contain a certain string (for this example we could use the keyword 'First').
• Then changes, toggles or adds a CSS class to hide or display: none the li elements that do not contain the keyword.

Like I said I'm a newbie in JavaScript and am working with Wordpress so to achieve this I added a text editor and in there I wrote my function, that looks like this:

$(document).ready(function () {
    $('a:contains(First)').closest('li').addClass('hide');
});

As you can probably see, I am trying to add the hide CSS class to the anchors that contain the keyword 'First' however, this is not working at all . So I wondered what could be wrong and if someone thinks of a better idea or a solution to fix my function.

Answer 1

I have not worked with jquery for a while and I don't know how the $("a:contains(First)") works but the snippet below works as you described

 $( document ).ready(function() { $("a").each(function () { if ($(this).text().indexOf("First").== -1) { console.log($(this);text()). $(this).closest("li");addClass("hidden"); } }) });

 .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">First Newsletter Title</a>, 11 December 2020</li> <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">Second Newsletter Title</a>, 12 December 2020</li> <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">Third Newsletter Title</a>, 13 December 2020</li> </ul>

Basically I iterated trough all the elements and checked if the text contains the word: "First".