में jQuery के .closest()

Question

मैं एक "चल कुल" के लिए कुछ गणना करने की कोशिश कर रहा हूँ, यह मेरा कोड है एक वर्ग के नाम का उपयोग करना:

$('.quantity_input').live('change',function(){   
       var ValOne = parseFloat($(this).val()); 
       var ValTwo = parseFloat($(".price").text()) 
       var totalTotal = ((ValOne) * (ValTwo));       
       $('.cost_of_items').closest('.cost_of_items').text(totalTotal.toFixed(2)); 
       calcTotal(); 
      });  

.quantity_input एक इनपुट है, .price है उत्पाद की कीमत, .cost_of_items वह जगह है जहां मैं आइटम के लिए कुल लागत को अपडेट करना चाहता हूं, यानी। item1 = £ 5 x 3 मात्रा = आइटम 1 calcTotal() के लिए £ 15 कुल एक ऐसा फ़ंक्शन है जो ऑर्डर के लिए कुल लागत को अपडेट करता है। समस्या तालिका के एक पंक्ति में सभी गणित को रख रही है, यानी मैं उपरोक्त कोड में कैल्क कर रहा हूं और इसकी पंक्ति में चिपक नहीं रहा है, यह कक्षाओं के साथ सभी क्षेत्रों को अद्यतन करता है .cost_of_items आदि ...

मेरी एचटीएमएल दिखा के साथ समस्या यह है कि इसके गतिशील jQuery .appends द्वारा जोड़ा() लेकिन यहाँ प्रासंगिक jQuery है:

$('#items').append('<tr class="tableRow"><td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a><td class="om_part_no">' + omPartNo + '</td><td>' + supPartNo + '</td><td>' + cat + '</td><td class="description">' + desc + '</td><td>' + manuf + '</td><td>' + list + '</td><td>' + disc + '</td><td><p class="add_edit">Add/Edit</p><input type="text" class="quantity_input" name="quantity_input" /></td><td class="price_each_nett price">' + priceEach + '</td><td class="cost_of_items"></td><td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td></tr>'); 

संपादित करें:

कार्य समाधान:

$('.quantity_input').live('change',function(){   
       var ValOne = parseFloat($(this).val()); 
       var ValTwo = parseFloat($(this).closest('tr').find('.price').text()) 
       var totalTotal = ((ValOne) * (ValTwo));       
       $(this).closest('tr').find('.cost_of_items').text(totalTotal.toFixed(2)); 
       calcTotal(); 
      });  

Answer 1

आप this युक्त <tr> में .cost_of_items खोजने की जरूरत है:

$(this).closest('tr').find('.cost_of_items') 

Answer 2

निकटतम निकटतम पूर्वज (माता-पिता, दादा-दादी) पाएंगे, लेकिन फिर अपडेट करने के लिए सही तत्व खोजने के लिए आपको एक खोज करने की आवश्यकता होगी। उदाहरण के लिए, यदि आप एक तालिका पंक्ति में एक तत्व है और आपको लगता है कि एक ही पंक्ति में एक और तत्व की जरूरत है:

$('.myElement').closest('tr').find('.someOtherElement'); 

संपादित करें:

आपके मामले में, आप चाहते हैं जाएगा

$(this).closest('tr').find('.cost_of_items').text(totalTotal.toFixed(2)); 

Answer 3

आपको खोजने के लिए उपयोग करने की ज़रूरत नहीं है। closest takes a context argument। जो आपको खोज के क्षेत्र को कम करने में मदद करता है। आपको इसका इस्तेमाल करना चाहिए।

Answer 4

मैं .find() का उपयोग नहीं करता। मुझे लगता है कि यह निकटतम <td> तक पहुंचने के लिए शायद थोड़ा और अधिक कुशल होगा और jQuery's .siblings() method का उपयोग कर .cost_of_items कक्षा के साथ भाई <td> प्राप्त करें।

$(this).closest('td').siblings('.cost_of_items'); 

---

संपादित करें: स्पष्ट करने के लिए, यहाँ .append() से मार्कअप है:। निकटतम

<tr class="tableRow"> 
    <!-- NOTE THAT THE CLOSING </td> IS MISSING FOR THE FIRST <td> --> 
    <td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a> 
    <td class="om_part_no">' + omPartNo + '</td> 
    <td>' + supPartNo + '</td> 
    <td>' + cat + '</td> 
    <td class="description">' + desc + '</td> 
    <td>' + manuf + '</td> 
    <td>' + list + '</td> 
    <td>' + disc + '</td> 
    <!-- TRAVERSE TO HERE --> 
    <td> 
     <p class="add_edit">Add/Edit</p> 
     <!-- START HERE --> 
     <input type="text" class="quantity_input" name="quantity_input" /> 
    </td> 
    <td class="price_each_nett price">' + priceEach + '</td> 
    <!-- SIBLING IS HERE --> 
    <td class="cost_of_items"></td> 
    <td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td> 
</tr>