आईडी नाम

<div id="calcwrapper"> 
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17"> 
    <div id="drinks"> 
     <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div> 
    </div> 
</div>

ऊपर दिए गए उदाहरण में केवल एक ही पेय बटन है, लेकिन मेरे कोड में आठ बटन हैं। प्रत्येक एक समान नामित वर्गीकृत div के साथ। मैं जो करने की कोशिश कर रहा हूं वह "गतिशील रूप से" एंकर टैग (आईडी = "पेय 1") की आईडी को पकड़ लेता है ताकि क्लोन शर्करा छवि (आईएमजी कक्षा = "शर्करा" ...) को समकक्ष वर्ग नाम div (कक्षा) में जोड़ दिया जा सके। = "drink1")। मुझे आशा है कि भ्रमित नहीं होगा। शायद नीचे असफल प्रयास आपको कुछ हासिल करने का प्रयास करेंगे जो मैं प्राप्त करने की कोशिश कर रहा हूं।आईडी नाम

प्रयास 1

$(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent((".drink1").attr("class")));

प्रयास 2

var className = $(this).attr("id"); 
console.log(className); 

console.log($(this).parent().children("div").hasClass(className));

मैं गूगल और StackOverflow खोज की है और किसी भी कोड नमूने नहीं मिला है (कंसोल के माध्यम से काम कर रहे समाधान खोजने की कोशिश)। आपके सहयोग के लिए धन्यवाद।

यहाँ पूरा एचटीएमएल कोड संदर्भ है ...

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
    <script src="js/jquery-animate-css-rotate-scale.js"></script> 
    <script> 
     $(function() { 
      $(".sugarcube").hide(); 
      var max = 8; 
      function animateSugarcubes() { 
       for (var i=1; i<=max; i++) { 
        $(".sugarcube" + i).css("position", "absolute"); 
        $(".sugarcube" + i).css("top", Math.ceil(Math.random() * (50 - 20) + 20)); 
        $(".sugarcube" + i).css("left", Math.ceil(Math.random() * (85 - 40) + 40)); 
        $(".sugarcube" + i).hide(); 
       } 
      } 

      $("#drinks a").click(function() { 

       for (var i=1; i<=max; i++) { 
        // Attempt 1 
        $(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent().children($(this).attr("id"))); 

        // Attempt 2 test code. 
        var className = $(this).attr("id"); 
        console.log($(this).parent().children("div").hasClass(className)); 
       } 

       return false; 
      }); 
      animateSugarcubes(); 
     }); 
    </script> 
</head> 
<body> 

<div id="calcwrapper"> 
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17"> 
    <div id="drinks"> 
     <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div> 
     <a id="drink2" href=""><img src="images/drinkicon2.png" width="84" height="81"></a><div class="drink2"></div> 
     <a id="drink3" href=""><img src="images/drinkicon3.png" width="84" height="81"></a><div class="drink3"></div> 
     <a id="drink4" href=""><img src="images/drinkicon4.png" width="80" height="81"></a><div class="drink4"></div> 
     <a id="drink5" href=""><img src="images/drinkicon5.png" width="84" height="81"></a><div class="drink5"></div> 
     <a id="drink6" href=""><img src="images/drinkicon6.png" width="84" height="81"></a><div class="drink6"></div> 
     <a id="drink7" href=""><img src="images/drinkicon7.png" width="84" height="81"></a><div class="drink7"></div> 
     <a id="drink8" href=""><img src="images/drinkicon8.png" width="84" height="81"></a><div class="drink8"></div> 
    </div> 
</div> 

</body> 
</html>

कृपया ध्यान दें कि एंकर टैग एक आईडी (आईडी = "drink1") का उपयोग करता है, जबकि div एक वर्ग (वर्ग = "drink1") का उपयोग करता है

स्रोत

2012-12-07 Ryan Allen

किस संदर्भ यह कहा जाता है मिलान वर्ग के नाम के साथ divs हो जाएगा इंट? उपर्युक्त कोड में 'यह' क्या है? –

समझ में नहीं आया, तो मैं आपके प्रश्न का उत्तर सचमुच तो मैं कुछ इस तरह से खत्म हो सकता है:

var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks 
drinksLinks.each(function() {  // perform function for each element 
    var element = $(this);   // get jquery object for the current element 
    var id = element.attr("id"); // get the id 
    var div = element.find("." + id); // find the element with class matching the id 

    $(".sugarcube").clone().appendTo(div); 
});

हालांकि, अगर आप चीजों को संदर्भित से बचने के लिए प्रयास करना चाहिए कक्षा द्वारा यदि आप एक विशिष्ट तत्व खोजने की कोशिश कर रहे हैं।

var sugarcube = $(".sugarcube"); 
var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks 

drinksLinks.each(function() { 
    var div = $(this).next(); // get the element next to the a tag 
    sugarcube.clone().appendTo(div); 
});

योग्य कुछ बातें याद करने के लिए:

मेरे सुझाव वास्तव में सिर्फ ग्रहण करने के लिए कि इस तरह के drinks1 के रूप में एक div हमेशा सही एक टैग के बगल में है, तो आप की तरह कुछ कर सकते हैं हो सकता है अपने चयनकर्ताओं को यथासंभव संकीर्ण बनाने की कोशिश करें क्योंकि DOM महंगा हो सकता है।
आईडी है, जहां इस के रूप में संभव द्वारा डोम खोज करने के लिए प्रयास करें देशी रूप पुराने ब्राउज़र में वर्ग द्वारा की तुलना में तेजी है
आप एक ही तत्व के लिए कई संदर्भ बनाने, एक चर में संग्रहीत है कि मैं के साथ किया है कर रहे हैं शक्कर तत्व। इस तरह से आप परिणाम प्राप्त करने के

आशा इस मदद करता है क्रम में पेज आप की जरूरत की खोज की राशि नीचे कट!

स्रोत

2012-12-07 16:23:19

एक बेल्ट प्रतिक्रिया। हमने इसे आसान बनाने और विभिन्न प्रकार के शक्कर समूह बनाने का फैसला किया। फिर बटन दबाए जाने के बाद उन्हें आसानी से एनिमेट करने के लिए jquery का उपयोग करें। –

कोई समस्या नहीं है। अगर इससे मदद मिली तो कृपया इस सवाल से बचने के लिए उत्तर के रूप में चिह्नित करें। धन्यवाद! –

यदि आप पहचानकर्ता के साथ तत्वों का उपयोग कर रहे हैं, तो "आईडी" के बजाय "कक्षा" का उपयोग करें। "आईडी" अद्वितीय होना चाहिए। दिए गए उदाहरण में यह डी और एक टैग के लिए भी प्रयोग किया जाता है।

कोई अच्छा विचार नहीं है! < - क्षमा करें, मैंने सोचा कि एक ही नाम के साथ दो आईडी हैं

यह मेरे लिए काम कर रहा था। लेकिन यह संभव है कि मैं आपके सवाल का सही ढंग से

$('#drink1').clone().attr('id','drink2').appendTo('#drinks')

स्रोत

2012-12-07 16:21:15 devanand

मुझे उस एचटीएमएल में एक डुप्लिकेट आईडी आईडी नहीं दिखाई दे रही है। –

कैसे कुछ इस तरह के बारे में:

var id = $(this).attr('id'); 
var targetDiv = $('.' + id);

उसके उदाहरण लक्ष्य div कि आईडी

स्रोत

2012-12-07 16:24:01 cowls

उत्तर

संबंधित मुद्दे