Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12951 > unrolled thread

nest an each loop within an each loop??

Back to article view | Back to comp.lang.javascript

Contents

  nest an each loop within an each loop?? tommls <tlyczko@gmail.com> - 2012-03-21 11:26 -0700
    Re: nest an each loop within an each loop?? tommls <tlyczko@gmail.com> - 2012-03-21 11:47 -0700
      Re: nest an each loop within an each loop?? Gregor Kofler <usenet@gregorkofler.com> - 2012-03-21 23:24 +0100
    Re: nest an each loop within an each loop?? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-22 00:58 +0100

#12951 — nest an each loop within an each loop??

I have this each function:

jQuery(function($){
  $('#myCarousel img').each(function(index) {
    var imgWidth=$('#myCarousel img').width();
    alert(imgWidth);
    $this = $(this).wrap('<div class="img-caption" style="width:' +
imgWidth + 'px; float:left;" />');
    $('<p>' + $this.attr("title") + '</p>').insertAfter($this);
});
});

How and where do I nest this 2nd each loop inside the first one??
Both must run and they are looking for different image IDs.
It does not work to try having them run separately since this JS is
positioned at the bottom of the page and runs when the page loads...

    // 2nd each
    //$('#caption img').each(function(index) {
    //var imgCaptionWidth=$('#caption img').width();
    //$this = $(this).wrap('<div class="img-caption" style="width:' +
imgCaptionWidth + 'px;" />');
    //$('<p>' + $this.attr("title") + '</p>').insertAfter($this);
    //}};
   //}};
   //}};

Thank you, Tom

[toc] | [next] | [standalone]

#12953

Basically any kind of code which will look through all the images and
apply the above code depending on the image's ID (or class if
necessary).

The code is different depending on the ID -- the second each loop does
not apply a float:left; whereas the second one does. Need it that way
so end user can specify desired float, whereas first code will always
be float: left.

Thank you, Tom

[toc] | [prev] | [next] | [standalone]

#12969

Am 2012-03-21 19:47, tommls meinte:

>> jQuery(function($){
>>   $('#myCarousel img').each(function(index) {
>>     var imgWidth=$('#myCarousel img').width();
>>     alert(imgWidth);
>>     $this = $(this).wrap('<div class="img-caption" style="width:' +
>> imgWidth + 'px; float:left;" />');
>>     $('<p>' + $this.attr("title") + '</p>').insertAfter($this);
>> });
>> });
>>

Ah, beautiful code abound.

> Basically any kind of code which will look through all the images and
> apply the above code depending on the image's ID (or class if
> necessary).

Something like

var img = document.images, l = img.length;

while(l--) {
  if(img[l].className == "whatever") {
    ...
  }
  else {
    ...
  }
}

I can only guess what your "above code" does, since I don't do jQuery,
your coding style is horrible [1], and the snippet is anything but ligible.

[1]
Constructs like
$('#myCarousel img').each(function(index) {
  var imgWidth=$('#myCarousel('img').width();
[..]
look like /slight/ overhead, even for a non-jQuery ninja.


Gregor


-- 
http://vxweb.net

[toc] | [prev] | [next] | [standalone]

#12973

Le 21/03/12 19:26, tommls a écrit :
> I have this each function:
>
> jQuery(function($){
>    $('#myCarousel img').each(function(index) {
>      var imgWidth=$('#myCarousel img').width();
>      alert(imgWidth);
>      $this = $(this).wrap('<div class="img-caption" style="width:' +
> imgWidth + 'px; float:left;" />');

I do not understand at all !
with a float-left-style the width of the div will be this of the 
contained image

>      $('<p>' + $this.attr("title") +'</p>').insertAfter($this);
> });
> });

var I = document.images, n = I.length, d, p;
if(n)
while(n--) {
   d = document.createElement('DIV');
   d.appendChild(I[n]);
   p = document.creatElement('P');
   p.innerHTML = I[n].title;
   d.appendChild(p);
   if(document.getElementById('myCarousel'))
   document.getElementById('myCarousel').appendChild(d);
   }
else alert('error! browser not knowing the images collection');


css :
=====
#myCarousel div { float: left; text-align: center }




-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web