jquery on() function and get value/text using traversing

Question

How can I get value/text using on() function?

html w/php from ajax response

echo "<div class='cartItem-buyingItem'>";
        echo "<a href='#' class='buyingItem-closed styleCrl-gry1 stxt10'>X<span class='pid'>".$row["prdct_id"]."</span><br></a>";           
        echo "<div class='buyingItem-img'>";
            echo "<img src='../".$row['prdct_picture']."'>";
        echo "</div>";
        echo "<div class='buyingItem-details styleCrl-gry'>";
            echo "<div class='buyingItem-desc styleCrl-gry2 stxt12'>";
                echo substr($row['prdct_description'],0,130)."...";
            echo "</div>";
        echo "</div>";
        echo "<div class='buyingItem-origPrcng'>";
            echo "<div class='buyingItem-unitPrice byngItm-untPrc stxt16 styleCrl-green'>". number_format($row['prdct_newPrice'] ,2) ."</div>";
            echo "<div class='buyingItem-disPrice stxt12 styleCrl-gry2'>". number_format($row['prdct_price'] ,2) ."</div>";
        echo "</div>";
        echo "<div class='buyingItem-qty'>";
            echo "<select class='buyingItem-qty-total'>";
                echo "<option value='".array_count_values($allcart_num)[$row['prdct_id']]."'>".array_count_values($allcart_num)[$row['prdct_id']]."</option>";
                echo "<option value='4'>4</option>";
                echo "<option value='6'>6</option>";
                echo "<option value='8'>8</option>";                
            echo "</select>";
        echo "</div>";
        echo "<div class='buyingItem-subPrcng'>";
            echo "<div class='buyingItem-ttlPrice stxt16 styleCrl-green'>". number_format( bcmul(array_count_values($allcart_num)[$row['prdct_id']] , $row['prdct_newPrice'] ,2) ,2) ."</div>";
            echo "<div class='buyingItem-ttlDisPrice stxt12 styleCrl-gry2'>". number_format( bcmul(array_count_values($allcart_num)[$row['prdct_id']] , $row['prdct_price'] ,2) ,2) ."</div>";
        echo "</div>";
    echo "</div>";

script

$(".cartItem-Load").on('change', '.buyingItem-qty select', function(){      
    alert($(this).val());
    alert($(this).find('.buyingItem-unitPrice').text());//always null/undefined result 
})

How can I get other parents child value using right traversing on jquery?

I need to get the value of select .buyingItem-unitPrice and multiply to select value .buyingItem-qty select

Rory McCrossan · Accepted Answer · 2015-06-24T10:27:53.800

0

The issue with your code is that find() is used to look for child elements, whereas the .buyingItem-unitPrice element is a child of a sibling to the parent of the select. To retrieve that, you could use a combination of closest() to get the common parent, and then find(). Try this:

$(".cartItem-Load").on('change', '.buyingItem-qty select', function() { 
    var unitPrice = $(this).closest('.cartItem-buyingItem').find('.buyingItem-unitPrice').text();
    var total = parseInt($(this).val(), 10) * parseFloat(unitPrice);
    console.log(total);
})

edited Jun 24 '15 at 10:27

answered Jun 24 '15 at 09:20

Rory McCrossan

331,213
40
305
339

it's work from getting the value/text of unitPrice but return NaN after multiplying it – mon-sun Jun 24 '15 at 09:34
1

Updated the answer for you. – Rory McCrossan Jun 24 '15 at 10:27
now it's working :) and i add parseFloat(unitPrice.replace(',', '') for comma. but how can i return value with 2 decimal places? //123.20 – mon-sun Jun 25 '15 at 00:59
:) to upadte this: var total = (parseInt($(this).val(), 10) * parseFloat(unitPrice.replace(',', ''))).toFixed(2); – mon-sun Jun 25 '15 at 01:09
sir how can i update .buyingItem-ttlPrice with new total? $(this).closest('.cartItem-buyingItem').find('.buyingItem-ttlPrice').innerHTML = total; – mon-sun Jun 25 '15 at 01:15
`innerHTML` is a property of a DOMElement, not a jQuery object - use `text()` instead: `$(this).closest('.cartItem-buyingItem').find('.buyingItem-ttlPrice').text(total);` – Rory McCrossan Jun 25 '15 at 06:51

jquery on() function and get value/text using traversing

1 Answers1