Нажмите на кнопку, если абзац имеет определенный текст

Question

У меня есть этот HTML здесь:

<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>

В этом HTML вы можете видеть два элемента абзаца.Эти абзацы могут создаваться через произвольные интервалы и могут добавляться к <div> с помощью класса «log».Вы также можете увидеть, что каждый абзац может содержать определенные текстовые строки.Например, «используемый элемент».

Можно ли в любом случае проверить каждый абзац на наличие определенных строк, и, если он совпадает, выполнить функцию для этого текущего элемента абзаца?Как, может быть, изменить .innerHTML или нажать кнопку или сам абзац.?ETC ...

Answer 1

Вы можете добавить событие для его изменения при создании

или после его создания следующим образом:

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

})

Answer 2

Вы можете проверить текст, используя .includes() внутри .each().

Демо:

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>

Answer 3

Используйте indexOf, чтобы найти строку желаний.

$('#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>