फॉर्म टेक्स्ट इनपुट की मूल पंक्ति ढूंढना

Question

मैं किसी आइटम के बारे में डेटा संग्रहीत करने के लिए किसी HTML तालिका में डेटा-एट्रिब्यूट्स का उपयोग करने का प्रयास कर रहा हूं जिसे बाद में अजाक्स कॉल में उपयोग किया जाएगा, लेकिन मुझे अपने jQuery चयन में परेशानी हो रही है मैं डेटा वापस पाने की कोशिश करता हूं।

यह काम करता है:

var listItemId = $(this).parent().parent().attr('data-id'); 

हालांकि, .parent().parent() चयनकर्ता भी नाजुक है - it'll तोड़ने अगर मैंने कभी अपने HTML संरचना बदल जाते हैं।

यह मैं क्या करना चाहते हैं क्या है, लेकिन यह अपरिभाषित लौटा रहा है:

var listItemId = $(this).parent('.list-item').attr('data-id'); 

मेरे एचटीएमएल इस तरह दिखता है:

<tr class="list-item" data-id="1"> 
    <td> 
    <input value="Some text entered by the user" type="text" > 
    </td> 
</tr> 

मैं क्या याद आ रही है?

Answer 1

आंतरिक रूप से, jquery उपयोग करता है। इस तरह के सामान के लिए सबसे अच्छा।

var listItemId = $(this).closest('tr').attr('data-id'); 

इसके अलावा अगर आप टेबल नेस्ट है (जो मैं कभी नहीं देखा है, लेकिन हम कभी पता नहीं), तो आपको पहले 'tr' भी चयन करने के लिए की है। (हालांकि पंक्तियों की तुलना में divs की तलाश में यह अधिक उपयोगी है)। हालांकि, कोड एकीकरण के लिए, जब मैं निकटतम की आवश्यकता होती हूं तो मैं माता-पिता का कभी भी उपयोग नहीं करता हूं। इस तरह से, समारोह के नाम का तात्पर्य यह वास्तव में अर्थ है (निकटतम माता पिता) है, जबकि .parents() व्याख्या करने के लिए और अधिक कमरा छोड़ देता है, और इस तरह कोड पठनीयता को कम (IMO)

प्रदर्शन बुद्धिमान, वे बराबर (जाँच this jsperf)

हैं parentNode (मील से तेजी से किसी और चीज से, तुम सच में गति की जरूरत है)

अपने मामले में

:

अंत में, आप भी एक शुद्ध javasrcipt approache विचार कर सकते हैं

var listItemId = $(this.parentNode.parentNode).attr('data-id'); 

या

var listItemId = this.parentNode.parentNode.attributes['data-id'].value; 

एनबी: शुद्ध जावास्क्रिप्ट विधियों को आपके प्रश्न में से एक के विपरीत काम करने के लिए वैध एचटीएमएल की आवश्यकता है (अपना इनपुट टैग बंद करें, और एक टेबल जोड़ें)।

here is a little fiddle

Answer 2

कोशिश जब तक यह चयनकर्ता से मेल खाता

Answer 3

मेरा सुझाव है

var listItemId = $(this).parents('.list-item').attr('data-id'); 

parents() पेड़ में चला जाता है:

var listItemId = $(this).parents('tr').data('id'); 

वर्ग चयनकर्ता सभी jQuery चयनकर्ताओं की सबसे धीमी है और जब तक आपको आवश्यक जानकारी पर जाने का कोई अन्य तरीका न हो, तब तक टालना चाहिए।

अद्यतन

मैं सही ढंग से .data() विधि का उपयोग करने के वाक्य रचना तय की। इस तरह से केवल संस्करण 1.4.3 या उच्चतम में काम करता है।

Answer 4

$(this).closest('tr').attr('data-id'); 

यह आपकी समस्या के लिए सबसे अच्छा समाधान हो जाएगा। कोड को आपके एचटीएमएल संरचना पर निर्भर नहीं किया जाएगा, जब तक कि आप टैग