Archief - jQuery add class

tomzorz · 18 mrt 2010

Hellow allemaal,

stel: ik heb op mijn pagina een resem div's staan met allemaal dezelfde klasse

Code:

<div class="item">bla bla</div>
<div class="item">bla bla</div>
<div class="item">bla bla</div>
<div class="item">bla bla</div>
<div class="item">bla bla</div>

en nu zou ik er graag met jQuery voor zorgen dat elk paar van die div's met als klasse "item" gewrapped worden in een andere div met als klasse bijvoorbeeld "rij". (zoals hieronder)

Code:

<div class="rij">
<div class="item">bla bla</div>
<div class="item">bla bla</div>
</div>
<div class="rij">
<div class="item">bla bla</div>
<div class="item">bla bla</div>
</div>
<div class="rij">
<div class="item">bla bla</div>
</div>

Ik kan hier niet meteen een methode voor vinden, ben echt geen js-coder zeg maar... alle hulp is dus meer dan welkom!

dank bij voorbaat,
tom

adrianhates · 18 mrt 2010

waarom doet ge dat niet gewoon bij het aanmaken van uw code? ( statisch of via een server side script )

en anderzijds moet ge daar geen jquery expert voor zijn , daar moet ge gewoon een beetje bij nadenken. Om u op weg te helpen:

Code:

var aantalrijen = $(".rij").size();
var i;
for(i = 0;i<aantalrijen;i++){
   if(i%2 == 0){
   
   }
}

tomzorz · 18 mrt 2010

Bedankt!

De reden dat ik het niet bij het aanmaken van de code doe is omdat het voor een Drupal-theme is, en ik het aantal items dus niet in de hand heb. Ik heb dan ook even geprobeerd om het met php te doen in de page.tpl maar dat lukte vooralsnog ook niet, en dat gaat op die manier ook moeilijker worden dan met jquery dacht ik zo...

bedankt voor dat stukkie code, ben niet zo programmatorisch maar zo geraak ik er wel hopelijk.

tomzorz · 20 mrt 2010

Ik had gedacht/gehoopt dat dit het wel zou doen:

Code:

$(document).ready(function(){
    var aantalrijen = $(".item").size();
	var i=1;
	
	for(i = 1;i<aantalrijen+1;i++){
	var o=i-1;
	
                if(i%2 == 0){
   	                $(".item:nth-child("+i+"),.item:nth-child("+o+")").wrap("<div class='row'></div>");
  	        };
  		
	};
});

maar wat hij dan doet is elke item apart wrappen, en niet per paar.
Er zit dus wellicht een foutje in het gebruik van de selector, waarbij ik gebruik maak van een komma om zowel de voorgaande div erbij te nemen. Maar dat doet de trick dus niet...
iemand een idee hoe ik ze wél per paar kan late wrappen?

dank bij voorbaat

Zero Grav · 21 mrt 2010

Pfoe, 'k heb het zelf eens gemaakt omdat ik het wel een interessante vraag vond en er zelf niet direct een oplossing voor kende. Toch zoudt ge dit eigenlijk in PHP moeten maken met ongeveer dezelfde code. Zo kunnen ook mensen zonder Javascript die rijen zien en is het ook minder intensief voor de gebruiker.

Code:

$("document").ready( init );

function init() {
	var $rows = $(".item").length;
	var $row = "<div class=\"row\" />";
	
	for(var $i = 1; $i < $rows; $i++){
		if($i % 2 == 0){
			$(".item").eq($i-1).prev(".item").andSelf().wrapAll($row);
		}
		
		if($rows %2 != 0 && $i == ($rows-1)) {
			$(".item").eq($i).wrap($row);
		}
	}
}

Dus, hij kijkt gewoon hoeveel divs er zijn met de 'item' klasse en overloopt ze allemaal. Ge kunt $i niet gelijkstellen aan 0 omdat EQ zero-based is en alles deelbaar is door 1. Dan kijkt em gewoon of er een oneven aantal items is, want als dat zo is zal em het laatste nooit wrappen, wat em nu dus wel doet.

JS Bin - Collaborative JavaScript Debugging

tomzorz · 21 mrt 2010

Wauw geweldig!
Moest het me in php nog lukken zal ik het idd via die weg doen

het zit het hem in de details.

Enorm bedankt voor dit!!

Archief - jQuery add class

tomzorz

Legacy Member

adrianhates

Legacy Member

tomzorz

Legacy Member

tomzorz

Legacy Member

Zero Grav

Legacy Member

tomzorz

Legacy Member