प्रत्येक div

Question

के माध्यम से jQuery लूप मुझे यकीन है कि यह आपके लिए jQuery वास्तव में एक आसान जवाब होगा, और मैं भी सुंदर हूं जैसे इसमें किसी प्रकार का लूप शामिल है।

मैं अनिवार्य रूप से दो अलग-अलग divs पर एक ही गणना करने की कोशिश कर रहा हूं, लेकिन छवियों की संख्या के आधार पर प्रत्येक आईडी को एक अलग सीएसएस चौड़ाई मान असाइन कर रहा हूं। मैं जो गणना कर रहा हूं वह वास्तव में मेरी समस्या के लिए अप्रासंगिक है, लेकिन मैंने उन्हें वैसे भी रखा क्योंकि यह वास्तविक कोड है जिसके साथ मैं काम कर रहा हूं।

यहाँ मार्कअप है ...

<div id ='test1' class='target'> 
    <div class='scrolling'> 
    <img/> 
    <img/> 
    <img/> 
    </div> 
</div> 

<div id ='test2' class='target'> 
    <div class='scrolling'> 
    <img/> 
    <img/> 
    <img/> 
    </div> 
</div> 

नीचे मेरे वर्तमान jQuery, जो ठीक काम करता है, लेकिन यह अक्षम है क्योंकि मैं कोड का एक और हिस्सा लिखने के लिए हर div जोड़ लिया है। मैं इसे कैसे मानकीकृत कर सकता हूं ताकि यह लक्ष्य के वर्ग के साथ प्रत्येक div के माध्यम से चलता है? धन्यवाद

/* Measure the width of each image. */ 
test1 = $('#div1 .scrolling img').width(); 
test2 = $('#div2 .scrolling img').width(); 

/* Find out how many images there are. */ 
test1img = $('#div1 .scrolling img').length; 
test2img = $('#div2 .scrolling img').length; 

/* Do the maths. */ 
final1 = (test1 * test1img)*1.2; 
final2 = (test2 * test2img)*1.2; 

/* Apply the maths to the CSS. */ 
$('#div1 .scrolling').width(final1); 
$('#div2 .scrolling').width(final2);  

Answer 1

इस तरह

:

$(".target").each(function(){ 
    var images = $(this).find(".scrolling img"); 
    var width = images.width(); 
    var imgLength = images.length; 
    $(this).find(".scrolling").width(width * imgLength * 1.2); 
}); 

$(this) वर्तमान .target जिसके माध्यम से लूप में चलाए जा कर देंगे। इस .target के भीतर मैं .scrolling img ढूंढ रहा हूं और चौड़ाई प्राप्त कर रहा हूं।

// Get the total width of a collection. 
$.fn.getTotalWidth = function(){ 
    var width = 0; 
    this.each(function(){ 
     width += $(this).width(); 
    }); 
    return width; 
} 

$(".target").each(function(){ 
    var images = $(this).find(".scrolling img"); 
    var width = images.getTotalWidth(); 
    $(this).find(".scrolling").width(width * 1.2); 
}); 

: और फिर अलग अलग चौड़ाई

आप सभी छवियों की चौड़ाई (वे अलग अलग चौड़ाई है जब) आप इसे इस तरह से कर सकते हैं गणना करने के लिए चाहते हैं के साथ जा रहा पर रखने ...

छवियाँ

Answer 2

आप सही है कि यह एक पाश शामिल हैं, लेकिन यह, कम से कम, each() विधि के उपयोग के द्वारा सरल बनाया:

$('.target').each(
    function(){ 
     // iterate through each of the `.target` elements, and do stuff in here 
     // `this` and `$(this)` refer to the current `.target` element 
     var images = $(this).find('img'), 
      imageWidth = images.width(); // returns the width of the _first_ image 
      numImages = images.length; 
     $(this).css('width', (imageWidth*numImages)); 

    }); 

संदर्भ:

• css() ।
• each()।
• find()।

Answer 3

.each() के बारे में क्या?

http://api.jquery.com/each/

Answer 4

$('div.target').each(function() { 
    /* Measure the width of each image. */ 
    var test = $(this).find('.scrolling img').width(); 

    /* Find out how many images there are. */ 
    var testimg = $(this).find('.scrolling img').length; 

    /* Do the maths. */ 
    var final = (test* testimg)*1.2; 

    /* Apply the maths to the CSS. */ 
    $(this).find('scrolling').width(final); 
}); 

यहाँ आप वर्ग लक्ष्य के साथ अपने सभी div के माध्यम से लूप और आप गणना करते हैं। इस लूप के भीतर आप वर्तमान में चयनित <div> टैग को इंगित करने के लिए बस $(this) का उपयोग कर सकते हैं।

Answer 5

बस के रूप में हम scrolling वर्ग

$(".scrolling").each(function(){ 
    var img = $("img", this); 
    $(this).width(img.width() * img.length * 1.2) 
})