Jquery का उपयोग करके एक माता-पिता div की आईडी ढूँढना

Question

मेरे पास कुछ html हैं:

<div id="1">
    <p>
        Volume = <input type="text" />
        <button rel="3.93e-6" class="1" type="button">Check answer</button>
    </p>
    <div></div>
</div>

और कुछ JS इस तरह:

$("button").click(function () {
    var buttonNo = $(this).attr('class');
    var correct = Number($(this).attr('rel'));

    validate (Number($("#"+buttonNo+" input").val()),correct);
    $("#"+buttonNo+" div").html(feedback);
});

मैं वास्तव में क्या पसंद करूंगा यदि मुझे बटन पर कक्षा = "1" नहीं है (मुझे पता है कि संख्यात्मक कक्षाएं मान्य नहीं हैं, लेकिन यह एक WIP है!), इसलिए मैं बटन पर आधारित कर सकता हूं! माता-पिता की आईडी। वास्तविक जीवन में इस तरह के कई खंड हैं।

1. मैं बटन को div parenting की id कैसे ढूँढ सकता हूँ।

2. बटन कोड में उत्तर को संग्रहीत करने के लिए और अधिक अर्थपूर्ण तरीका क्या होगा। मैं एक गैर प्रोग्रामर के लिए जितना संभव हो उतना मूर्खतापूर्ण बनाना चाहता हूं कि चीजों को तोड़ने के बिना कॉपी और पेस्ट करें!

Answer 1

आप पैरेंट डिव पर इवेंट डेलिगेशन का उपयोग कर सकते हैं । या बटन के माता-पिता को खोजने के लिए निकटतम विधि का उपयोग करें।

दो में से सबसे आसान शायद निकटतम है।

var id = $("button").closest("div").prop("id");

Comments

मैं वास्तव में निकटतम पसंद करता हूं क्योंकि आप कुछ ऐसा कर सकते हैं जैसे .closest ("div.foo") और कोड संरचना से बंधा नहीं है।

— मार्क

Thx मैं एक पुनरावर्ती कार्य करने वाला था .... तब मुझे पता था कि jquery में पहले से ही कुछ था ... मेरे मामले में मैंने $ ("#" + id) .closest ("div.form-group") का उपयोग किया। पैरेंट डिव जिसके पास फॉर्म-ग्रुप क्लास था।

— cabaji99

Answer 2

1।

$(this).parent().attr("id");

2।

बड़ी संख्या में तरीके होने चाहिए! एक तत्व को छिपाने के लिए हो सकता है जिसमें उत्तर हो, जैसे

<div>
    Volume = <input type="text" />
    <button type="button">Check answer</button>
    <span style="display: hidden">3.93e-6&lt;/span>
    <div></div>
</div>

और फिर ऊपर ले जाने के लिए समान jQuery कोड है कि:

$("button").click(function () 
{
    var correct = Number($(this).parent().children("span").text());
    validate ($(this).siblings("input").val(),correct);
    $(this).siblings("div").html(feedback);
});

ध्यान रखें कि यदि आप ग्राहक कोड में उत्तर देते हैं तो वे इसे देख सकते हैं :) ऐसा करने का सबसे अच्छा तरीका यह है कि इसे सर्वर-साइड को मान्य किया जाए, लेकिन सीमित दायरे वाले ऐप के लिए यह समस्या नहीं हो सकती है।

Comments

मुझे नहीं पता कि इस संपादक में HTML को कैसे प्रारूपित किया जाए, लेकिन यह माता-पिता को पिम की तुलना में हड़पने का एक सरल तरीका लगता है ('div: eq (0)') सामान; जब तक मैं यहां एक सूक्ष्मता को याद नहीं कर रहा हूं, तब html तत्वों में सभी में एक प्रत्यक्ष माता-पिता हैं, जो आपको बस माता-पिता () के साथ मिलते हैं।

— रोब ग्रांट

माता-पिता वास्तव में निकटतम माता-पिता को वापस कर देंगे, हालांकि, क्या होता है अगर वह तय करता है कि वह एक फ़ील्डसेट या प्रश्न के आसपास कुछ जोड़ना चाहता है, लेकिन डिव के अंदर।

— पिम जगेर

वास्तव में अपने स्वयं के उदाहरण में यह <p>

— पिम जगर

वास्तव में, यदि अधिक divs जोड़ते हैं तो 'div: eq (0)' गलत हो सकता है। संरचना बदलें, उस कोड को बदलें जो इसे पार्स करता है :) और हां मैंने उदाहरण के लिए आवश्यक न्यूनतम HTML के लिए उदाहरण को सरल बनाया; इसे माता-पिता को दो बार कॉल करना चाहिए।

— रोब ग्रांट

किसी कारण से जब मैंने माता-पिता का उपयोग किया () मैं एटर (आईडी) का उपयोग नहीं कर सका, मुझे इस तरह से परिणाम को लपेटना पड़ा $(parent[0]).attr('id') कुछ माता-पिता चयनकर्ताओं की बाद ।

— पायोटर कुला

Answer 3

इसे इस्तेमाल करे:

$("button").click(function () {
    $(this).parents("div:first").html(...);
});

Answer 4

$(this).parents('div').attr('id');

Answer 5

माता-पिता की आईडी प्राप्त करने के लिए:

$(buttonSelector).parents('div:eq(0)').attr('id');

इसके अलावा, आप अपने कोड को काफी कम कर सकते हैं:

$('button').click( function() {
 var correct = Number($(this).attr('rel'));
 validate(Number($(this).siblings('input').val()), correct);
 $(this).parents('div:eq(0)').html(feedback);
});

अब बटन-क्लास की कोई जरूरत नहीं है

स्पष्टीकरण
eq (0), इसका मतलब है कि आप jQuery ऑब्जेक्ट से एक तत्व का चयन करेंगे, इस मामले में तत्व 0, इस प्रकार पहला तत्व। http://docs.jquery.com/Selectors/eq#index
$ (चयनकर्ता)। भाई-बहन (भाई-बहन) सभी भाई-बहनों (एक ही माता-पिता के साथ ऐसे तत्वों) का चयन करेंगे जो भाई-बहन से मेल खाते हों। http://docs.jquery.com/Traversing / siblings # expr
$ (चयनकर्ता) .परेंट्स (पेरेंटसलेक्टर) चयनकर्ता द्वारा मिलान किए गए तत्वों के सभी माता-पिता का चयन करेंगे जो माता-पिता के चयनकर्ता से मेल खाते हैं। http://docs.jquery.com/Traversing/parents#expr
इस प्रकार: $ (चयनकर्ता) .parents ('div: eq (0)'); चयनकर्ता द्वारा मिलान किए गए तत्वों के पहले मूल विभाजक से मेल खाएगा।

आपको jQuery डॉक्स, विशेष रूप से चयनकर्ताओं और ट्रैवर्सिंग पर एक नज़र रखना चाहिए:

• http://docs.jquery.com/
• http://docs.jquery.com/Selectors
• http://docs.jquery.com/Traversing

Comments

सरल और आसान! क्यों div: eq (0)? उसका मतलब क्या है?

— रिच ब्रैडशॉ

मुझे लगता है कि 'div: eq (0)' गलत होगा यदि यह सब कम से कम एक div में लिपटा हो, क्योंकि आप एक रिश्तेदार के बजाय DOM का एक पूर्ण ट्रैवर्स कर रहे हैं। जो ठीक होगा यदि पहला तत्व "निकटतम" माता-पिता थे, लेकिन यह अन्यथा सुझाव देता है: tinyurl.com/bbegow

— रोब ग्रांट

(इसलिए मेरे माता-पिता का उपयोग) () के बजाय

— रोब ग्रांट

Answer 6

http://jsfiddle.net/qVGwh/6/ यह जांचें

   $("#MadonwebTest").click(function () {
    var id = $("#MadonwebTest").closest("div").attr("id");
    alert(id);
    });

Answer 7

इसे आसानी से किया जा सकता है:

$(this).closest('table').attr('id');

आप इसे किसी तालिका के अंदर किसी भी वस्तु से जोड़ देते हैं और यह आपको उस तालिका की आईडी वापस कर देगा।

Answer 8

जेकरी में डोम ट्री को स्थानांतरित करने के लिए .parents () विधि है जिसे आप वहां शुरू कर सकते हैं।

यदि आप इसे और अधिक अर्थपूर्ण तरीके से करने में रुचि रखते हैं, तो मुझे नहीं लगता कि एक बटन पर REL विशेषता का उपयोग करना आपके कोड में "यह उत्तर है" को शब्दार्थ रूप से परिभाषित करने का सबसे अच्छा तरीका है। मैं इन पंक्तियों के साथ कुछ सुझाऊंगा:

<p id="question1">
    <label for="input1">Volume =</label> 
    <input type="text" name="userInput1" id="userInput1" />
    <button type="button">Check answer</button>
    <input type="hidden" id="answer1" name="answer1" value="3.93e-6" />
</p>

तथा

$("button").click(function () {
    var correctAnswer = $(this).parent().siblings("input[type=hidden]").val();
    var userAnswer = $(this).parent().siblings("input[type=text]").val();
    validate(userAnswer, correctAnswer);
    $("#messages").html(feedback);
});

यह बिल्कुल सुनिश्चित नहीं है कि आपकी मान्य और प्रतिक्रिया कैसे काम कर रही है, लेकिन आपको यह विचार मिलता है।

Answer 9

खोजें () और निकटतम () की तुलना में थोड़ा धीमा लगता है:

$(this).parent().attr("id");

Comments

$(this).parent().parent().attr("id");?

— अलेजांद्रो इवान