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中，您可以看到两个段落元素。这些段落可以以随机的间隔创建，并且可以使用类“ log”附加到<div>上。您还可以看到每个段落可以包含特定的文本字符串。就像“二手物品”一样。

无论如何，我是否可以检查每个段落中的特定字符串，并且如果匹配，该函数是否适用于该当前段落元素？就像更改.innerHTML或单击按钮或段落本身一样？等等...

Answer 1

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

Answer 2

您可以添加事件以在创建事件时对其进行修改

或其创建后，如下所示：

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

})

Answer 3

您可以使用.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>

如果段落有特定文字，请点击按钮

3 个答案: