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

Question

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

<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();
}

这里是Fiddle：https://jsfiddle.net/8jmpnwuy/

当 .OutOfStockMessage 包含单词 'Avocado' 以及其他单词时，我需要包含单词 'Avocado' 的 div 内部的跨度来显示。

Answer 1

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

然后您可以在这些集合中找到直接跨度元素并显示它们。我建议使用 class 选择器而不是直接子选择器。这使得 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();

Working Demo

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

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

jquery

text

match

partial