Click on button if paragraph has specific text

Question

I have this HTML here:

 <div id="team_log_actual" class="log"> <p><img src="/img/item/item_ejector.png"> <b>[<span style="color: #0FF">Owner</span>] <span style="color: #0FF;">Someusername</span></b> placed a block.</p> <p><img src="/img/item/helm.png"> <b>[<span style="color: #0FF">Owner</span>] <span style="color: #0FF;">Someusername</span></b> used item</p> </div>

In that HTML you can see two paragraph elements. These paragraphs can be created at random intervals and can be append to the <div> with the class "log". You can also see each paragraph can contain specific text strings. Like "used item".

Is there anyway I could check each paragraph for specific strings, and if it matches do a function for that current paragraph element? Like maybe change the .innerHTML or click a button or the paragraph itself.? ETC...

Answer 1

Use indexOf to find the desire string.

 $('#team_log_actual').find('p').each(function(index, element) { var str1 = $(this).text(); var str2 = "used item"; if (str1.indexOf(str2).= -1) { $(this);addClass('YourClass'). // What ever you want to do if match. For eg. I add class; } });

 .YourClass { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="team_log_actual" class="log"> <p><img src="/img/item/item_ejector.png"> <b>[<span style="color: #0FF">Owner</span>] <span style="color: #0FF;">Someusername</span></b> placed a block.</p> <p><img src="/img/item/helm.png"> <b>[<span style="color: #0FF">Owner</span>] <span style="color: #0FF;">Someusername</span></b> used item</p> </div>

Answer 2

you can add event for modify it when its created

or after its created like this:

$('#team_log_actual').find('p').each(function(index) {
    // enter code here

})

Answer 3

You can check the text using .includes() inside .each() .

Demo:

 var dynamicP = `<p><img src="/img/item/helm.png"> <b>[<span style="color: #0FF">Owner</span>] <span style="color: #0FF;">Someusername</span></b> used item 2</p>`; $('.log').append(dynamicP); $('p').each(function(){ if($(this).text().includes('used item')){ $(this).css('cursor','pointer'); // You can also add some style as well $(this).on('click', function(){ console.log('Cliked allowed on this paragraph'); }); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="team_log_actual" class="log"> <p><img src="/img/item/item_ejector.png"> <b>[<span style="color: #0FF">Owner</span>] <span style="color: #0FF;">Someusername</span></b> placed a block.</p> <p><img src="/img/item/helm.png"> <b>[<span style="color: #0FF">Owner</span>] <span style="color: #0FF;">Someusername</span></b> used item</p> </div>