javascript - JQuery 查找子元素内部文本并替换为 IMG HTML

Question

我需要一些关于我正在创建的 Javascript 函数的帮助。本质上，我需要循环访问一组具有 .DetailRow 类的 DIV 并查找子 DIV 的内容(内部文本)。如果此文本与变量匹配，那么我需要用 IMG HTML 语句替换此内部文本。

顺便说一句，我对此有点陌生(4 个月大了!)，所以如果问题很简单，我深表歉意，但我尝试了一些组合，但我陷入了困境。

这是 HTML:

<div class="DetailRow" style="display: ">..</div>
<div class="DetailRow" style="display: ">..</div>
<div class="DetailRow" style="display: ">
   <div class="Label">Availability:</div>
   <div class="Value">in stock + Free Shipping</div>
</div>

例如，如果我在 LABEL 内部文本中找到“in stock”，我想将其替换为变量“instock”的值，该变量是 IMG HTML 语句。请参阅下面我的代码尝试。

<script type="text/javascript">
$(window).load(function(){
    var instock = '<img src="https://linktoimgfolder/instock.gif" title="Product available, usually ships 24hrs to 48hrs after order receipt" style="margin-top:-3px;">';  
    var lowstock = '<img src="https://linktoimgfolder/lowstock.gif" title="Product stcok low, order today so you do not miss out">';
    var nostock = '<img src="https://linktoimgfolder/outstock.gif" title="Product out of stock, could ship 1 to 2 weeks after order receipt">';

    $('div.DetailRow')each(function(){
        if (indexOf($(this).childNodes[1].innerHTML, "in stock") > 0) {
             $(this).childNodes[2].innerHTML = "";
             $(this).childNodes[2].innerHTML = instock;
        } else if (indexOf($(this).childNodes[1].innerHTML, "low stock") > 0) {
             $(this).childNodes[2].innerHTML = "";
             $(this).childNodes[2].innerHTML = lowstock;
        } else {
             $(this).childNodes[2].innerHTML = "";
             $(this).childNodes[2].innerHTML = nostock;
        };
    });
});
</script>​

顺便说一句，我无法完全匹配文本，因为“+”之外的文本会不时发生变化，因此我正在尝试indexOf。

非常感谢您的帮助!

中号

Answer 1

使用:contains选择器

var stock = {'in stock': instock, 'low stock': lowstock, 'no stock': nostock};

Object.keys(stock).forEach(function(key) {
    $('div.DetailRow div:contains(' + key + ')').html(stock[key]);
});

jsFiddle Demo

纯 jQuery 解决方案:

$.each(stock, function(key, value) {
    $('div.DetailRow div:contains(' + key + ')').html(value);
});