3

I want to check if a block of elements contains one or a few words and run specific code.

Within one theme I need to insert some links.

This is HTML:

<div>
<span class="nr">1</span>
<span class="block_subt">Element subtitle number one</span>
<a class="link" href="">Click here</a>
</div>
<div>
<span class="nr">2</span>
<span class="block_subt">Element subtitle number two</span>
<a class="link" href="">Click here</a>
</div>
<div>
<span class="nr">3</span>
<span class="block_subt">Element subtitle number three</span>
<a class="link" href="">Click here</a>
</div>

</div>

I want to create if statement that will check if the span with "block_subt" contains work like "three" it will append a link to anchor next to it. But also want to cover more blocks than one. This means cover another element if it contains the word "number three" add a different link to the next anchor. If another "block_subt" contains "two" append a different link.

What would be the best way to do it?

Obviously using one code multiple times would;t be a good idea. Plus code I'm running below will change every anchor and I want to change only one next to the HTML element that contains this specific word.

if ($(".block_subt:contains('Two')").length) {
        $(".link").attr("href", "http://www.google.com");
    }

Isn't a good idea. Could someone give me a pointer on this one?

ChrisCoz
  • 63
  • 2
  • 2
    I don't think you even need a loop for this. `$(".block_subt:contains('Two')").next().attr("href","http://www.google.com");` – Tim Roberts Mar 15 '21 at 17:47

1 Answers1

0

If you did go the loop way, you could use .includes() and .next() to find the matching bits of text. Additionally, if you would like to search for more than just one word, you can use the .some() method.

var blocks = $('.block_subt');

blocks.each(function(i, div) {
  var text = $(div).text().replace("'", "").split(" ");
  var searchWords = ["number's", "one"];
  
  if (searchWords.some(word => text.includes(word))) {
    var a = $(this).next();
    $(a).attr("href", "http://www.google.com");
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- WILL MATCH -->
<div>
  <span class="nr">1</span>
  <span class="block_subt">Element subtitle number's one</span>
  <a class="link" href="">Click here</a>
</div>
<div>
  <span class="nr">1</span>
  <span class="block_subt">Element subtitle number one</span>
  <a class="link" href="">Click here</a>
</div>

<!-- WILL NOT MATCH -->
<div>
  <span class="nr">2</span>
  <span class="block_subt">Element subtitle numbers two</span>
  <a class="link" href="">Click here</a>
</div>
<div>
  <span class="nr">3</span>
  <span class="block_subt">Element subtitle numbered three</span>
  <a class="link" href="">Click here</a>
</div>

It's a bit more verbose, but could maybe help get you in the right direction.

justDan
  • 2,302
  • 5
  • 20
  • 29
  • 1
    Amazing, thank you for your help @justDan This is what I've been looking to achieve. Few more changes and it works. Just one quick question. When trying to target two words like "number three" it doesn't work. Also if there is apostrophe as a part of any word. Even if I'm trying to tell jQuery that it isn't part of query like "number\'s" even if wrap like that "number's" – ChrisCoz Mar 16 '21 at 11:57
  • @ChrisCoz I updated the snippet to also use the `.some()` method. Now when you run the snippet, it'll match based off of the `searchWords` array. Now when it comes to the apostrophe part, I'm doing some more research to see how that can happen. Maybe with some kind of regex. I'll see what I can find. – justDan Mar 16 '21 at 12:57
  • Ok give this a go, Chris. Now it should account for apostrophes. Using the .replace() method we can look for the apostrophe, remove it and remove the blank space so words like "number's" become "numbers". I think this is what you were after. – justDan Mar 16 '21 at 23:18
  • 1
    Amazing, thank you justDan. Sorry, forgot to thank you again. I've been able to write what I need around your solution and everything works. – ChrisCoz Mar 24 '21 at 10:02
  • No worries, ChrisCoz. Happy to help out. – justDan Mar 24 '21 at 14:53
  • would be the problem if I ask you for small advice? I got issue and trying to solve it: https://stackoverflow.com/questions/67126922/problem-with-creating-loop-for-carousel-back-to-first-element If you get some free second I really appreciate that. I should get you Ko-fi :) – ChrisCoz Apr 16 '21 at 14:22
  • @ChrisCoz just saw this. Did the current answers help out? – justDan Apr 16 '21 at 16:33