JQuery: HTML

Question

पर चित्र जोड़ने के लिए .each() और .append() का उपयोग करने में सहायता करें सरल बग जिसे ठीक करने की आवश्यकता है और मैं यह नहीं समझ सकता कि क्या गलत है। मुझे HTML में एकाधिक (पांच) divs में एक ही तस्वीर को जोड़ने की आवश्यकता है। किसी कारण से, मेरा कोड प्रत्येक div में पांच बार एक ही तस्वीर को जोड़ रहा है। इसे और स्पष्ट करना, पांच divs में से प्रत्येक को एक तस्वीर की जरूरत है। अभी, सभी पांच में पांच चित्र हैं। यहाँ jQuery है:

$(".faq").each(function(){ 
     $('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">'); 
}); 

यह वह जगह है जहां यह डाला जा रहा है:

<div class="letter-q"></div> 

वहाँ शरीर के बीच बांट उन में से पांच हैं।

शायद यह कुछ छोटा है जो मुझे याद आ रहा है। किसी भी सहायता की सराहना की जाएगी!

Answer 1

आपके साथ काम करना चाहते हैं, तो पाँच .letter-क्यू div का पहला तो उनका चयन पहले तो यह है कि ".प्रत्येक" समय समारोह चलाया जाता है यह उन div के साथ काम कर रहा है:

$('.faq .letter-q').each(function(){ 
    //this wrapped in jQuery will give us the current .letter-q div 
    $(this).append('<img src="images/faq-q.png" alt="Question">'); 
}); 

Answer 2

$(".faq").each(function(){ 
     $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">'); 
}); 

अपने चयनकर्ता

करने के लिए एक context जोड़े और अधिक पढ़ें: http://api.jquery.com/jQuery/

या फिर आप एक पाश का उपयोग नहीं कर सकते हैं ...

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">'); 

Answer 3

इस उपयोग करके देखें:

$(".faq").each(function(){ 
    $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">'); 
}); 

Answer 4

आप की जरूरत नहीं है बाहरी .each() बिल्कुल कॉल करें। बस आंतरिक रेखा आप क्या चाहते हैं करना चाहिए:

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question" />'); 

आपका कोड प्रत्येक .faq (जिनमें से वहाँ पाँच रहे हैं) के लिए "के समकक्ष कर रहा है, उसे सभी पृष्ठों पर .faq .letter-क्ष खोजने के लिए और जोड़ने एक छवि"। आपको वास्तव में उस वाक्य का अंतिम खंड चाहिए।

Answer 5

यदि मुझे समझ में आया कि आपको क्या चाहिए, तो आपको बस एक बार चलना होगा और लूप नहीं।

मुझे लगता है कि मुख्य समस्या यह है कि जब आप इस लूप को करते हैं तो परिणाम इस तरह होना चाहिए।

पाश से पहले:

<div class="letter-q"></div> 
<div class="letter-q"></div> 
<div class="letter-q"></div> 
<div class="letter-q"></div> 
<div class="letter-q"></div> 

पहली बार परिणाम होगा:

<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 

दूसरी बार:

<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 

और इतने पर ....

सादर , ई ddiedu

Answer 6

इस प्रयास करें,

$(".faq").each(function(){ 
     $(this).find('.letter-q').html('<img src="images/faq-q.png" alt="Question">'); 
}); 

Answer 7

यह वहाँ शायद इस समस्या का शुद्ध सीएसएस समाधान है कि रूप में अच्छी तरह ध्यान देने योग्य है।पृष्ठ में <img> टैग डालने की बजाय, आप लक्ष्य के लिए पृष्ठभूमि के रूप में छवि के स्रोत का उपयोग कर सकते हैं (यदि इसमें पहले से पृष्ठभूमि नहीं है)।

HTML और अन्य सीएसएस की संरचना लागू किया जानने के बिना, यह सुनिश्चित करने के लिए असंभव है, लेकिन यहाँ एक अनुमान है:

.faq .letter-q { 
    padding-right: 20px; /* or however wide the image is */ 
    min-height: 20px; /* or however tall the image is */ 
    background-image: url(images/faq-q.png); 
    background-position-x: 100%; 
    background-position-y: 50%; 
    background-repeat: no-repeat; 
}