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

JQuery find child element inner text and replace with IMG HTML

本文关键字：替换 IMG HTML 文本 查找 元素 内部 JQuery      更新时间：2023-09-26

我需要一点帮助来开发我正在创建的Javascript函数。从本质上讲，我需要用类循环浏览一组 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 内部文本中找到"有货"，我想用变量"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>​

顺便说一句，m 我无法完全匹配文本，因为"+"以外的文本会不时更改，因此我正在尝试 indexOf。

提前感谢您的帮助！

米

使用 ：包含 选择器

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

一个纯粹的jQuery解决方案：

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

$('div.DetailRow')each(function(){这一行有拼写错误，然后你可以使用 jQuery .text() 和 .html() 来检查值和更新。

尝试：

$('div.DetailRow').find("div").each(function(){
        if($(this).text().indexOf("in stock")!=-1){
            $(this).text("");
            $(this).html(instock);
        }else if($(this).text().indexOf("low stock")!=-1){
            $(this).text("");
            $(this).html(lowstock);
        }else{
            $(this).text("");
            $(this).html(nostock);
        }
    });

演示小提琴

注意：更新了代码以在div.DetailsRow中查找div。根据您的要求进行更改。

相关文章：