CODEWITHSUNDEEP
javascriptjqueryhtml
TheRealPapa
TheRealPapa

Reputation: 4539

JQuery find child element inner text and replace with IMG HTML

I need a little help with a Javascript function I am creating. In essence, I need to loop through a set of DIVs with class .DetailRow and find a child DIV's content (inner text). If this text is matched to a variable, then I need to replace this inner text with an IMG HTML statement.

BTW I am kinda new at this (4 months old!) so apologies if the issue is simple, but I have tried a few combos and I am stuck.

Here's the 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>

Example, if I find "in stock" in the LABEL inner text, I want to replace it with the value of the variable "instock" which is an IMG HTML statement. See my code attempt below.

<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>​

By the way,m I cannot match text exactly as the text beyond the "+" will change from time to time, thus I am trying indexOf.

Many thanks in advance for your assistance!

M

Upvotes: 2

Views: 5817

Answers (2)

c.P.u1
c.P.u1

Reputation: 17094

Using the :contains selector

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

A pure jQuery solution:

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

Upvotes: 2

Kiran
Kiran

Reputation: 20303

You have typo in this line $('div.DetailRow')each(function(){ and then you can use jQuery .text() and .html() to check value and update.

Try:

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

DEMO FIDDLE

NOTE: Updated code to find div inside div.DetailsRow. Change it according to your requirement.

Upvotes: 0

Related Questions