匹配一个 div 中的部分文本，如果它与另一个 div 中的文本匹配，则显示一个 span - jquery 和 javascript

Match partial text in a div and if it matches text in another div then show a span - jquery and javascript

提问人：AlexTheDude 提问时间：5/11/2020 最后编辑：AlexTheDude 更新时间：5/14/2020 访问量：470

问：

如果产品有缺货消息，我需要显示产品的库存数量：

<div class="OutOfStockMessage">Sorry, Avocado is not available in the quantity that you selected. Please select a lower quantity to be able to place this order.</div>
<div class="ItemDecription">Avocado<span class="Quantity" style="display:none"> 16 pieces in stock</span></div>
<div class="ItemDecription">Tomato<span class="Quantity" style="display:none"> 97 pieces in stock</span></div>
<div class="ItemDecription">Mushroom<span class="Quantity" style="display:none"> 217 pieces in stock</span></div>

我尝试了这个jQuery，但是它仅适用于精确的文本匹配，而不适用于部分文本匹配：

if ( $(".OutOfStockMessage").text() == $(".ItemDecription").text() ) {
$(".Quantity").show();
}

这是小提琴：https://jsfiddle.net/8jmpnwuy/

什么时候。OutOfStockMessage 包含单词“鳄梨”和其他单词，然后我需要包含单词“鳄梨”的 div 内部的跨度来显示。

jQuery 文本 匹配 部分

评论

答：

0赞 Milind Anantwar 5/11/2020 #1

您可以使用函数查找所有具有部分文本匹配的 itemdescription div OutOfStockMessage 消息文本。.filter()

然后，您可以在这些集合中找到直接跨度元素并显示它们。我建议使用类选择器而不是直接子选择器。这使得它不容易发生 DOM 更改的错误

var stockMessageTxt= $(".OutOfStockMessage").text();
var $itemDescrptnToShow = $(".ItemDecription").filter(function(){
  return stockMessageTxt.includes($(this).clone()
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
   .text());
});
$('.Quantity', $itemDescrptnToShow).show();

工作演示

评论

0赞 AlexTheDude 5/11/2020
谢谢。言语无法形容我对你的帮助的感激之情。您的答案和代码将用于我的电子商务网站，每天帮助数百人。
0赞 Milind Anantwar 5/11/2020
@AlexTheDude ： 很高兴它能帮助:)
0赞 AlexTheDude 5/12/2020
好的，我犯了一个错误，认为我的电子商务平台有.数量跨度内 .ItemDescription div，但跨度实际上在 div 之后，而不是在 div 内部。这抛弃了工作代码，我尝试了几个小时让它工作，但没有任何运气。我将添加一个小提琴链接，显示它的实际情况。
0赞 Milind Anantwar 5/12/2020
@AlexTheDude：嗨，亚历克斯，由于 DOM/HTML 发生了变化，您可以将其作为新问题发布吗？使用正确缩进的 HTML？将发布答案。
0赞 AlexTheDude 5/12/2020
是的，我会用正确缩进的 HTML 将其作为新问题发布。我将开始处理新问题，并应在几分钟内发布。谢谢。

上一个：jQuery ajax 在 ajax 结果中查找匹配项

下一个：获取两个字符 JQuery 之间的文本