Meerdere <div>'s uitlezen

Door Geert van Galen op 22-02-2016 01:42

2.541 views

Ik ben bezig met een script wat een bepaalde div naam uit moet lezen, maar het kunnen er steeds verschillende zijn dus op 1 pagina bijv 10, maar op de andere ook weer 30.

Nu vraag ik mij af hoe ik deze divs met de inhoud door middel van een array kan kopieeren als het ware.

Hieronder een voorbeeldje:

Stel we hebben:

<div name="div1">Inhoud van div 1 </div>
<div name="div2">Inhoud van div 1 </div>
<div name="div3">Inhoud van div 1 </div>
<div name="div4">Inhoud van div 1 </div>
<div name="div5">Inhoud van div 1 </div>

Hoe kan ik er dan voor zorgen dat dit zo wordt uitgelezen dat er uiteindelijk variabelen uitkomen zoals:

$div1 = "Inhoud van div 1";
$div2 = "Inhoud van div 2";
$div3 = "inhoud van div 3";

Ik zelf ben al aan de slag gegaan met wat mogelijk heden maar ik kom er echt niet uit, dus het zou super tof zijn als iemand me hiermee kan helpen.

E WNSMA

22-02-2016 06:45

Dit kan je gemakkelijk doen met jQuery


<div id="all-divs">
    <div id="div1">
        Inhoud van div 1
    </div>
    <div id="div2">
        Inhoud van div 2
    </div>
    <div id="div3">
        Inhoud van div 3
    </div>
    <div id="etc">
        Inhoud van div etc
    </div>
</div>
<div class="uitlezen"></div>


var allDivs = $("#all-divs div"),
    arr = [];
    
// Loop door divs in #all-divs   
$.each(allDivs, function(i){
	var obj = {}, // Creeer lege obj
    	divName = allDivs[i].id, // variable voor div id/name
    	divText = allDivs[i].innerText; // variable voor div text
    
    // Elke data in obj zetten
    obj.name = divName,
    obj.text = divText
    
    // Huidige obj in array zetten
    arr.push(obj)
})

// Array met onze objecten uitlezen
var uitlezen = "<br>",
	uitlezenDiv = $(".uitlezen");


arr.forEach(function(data) {
	uitlezen += "<div class=" + data.name + ">";
	uitlezen += "<div><span class=name> Div name: </span>" + data.name + "</div>";
    uitlezen += "<div><span class=text> Div text: </span>" + data.text + "</div>";
    uitlezen += "</div>"
}); 
uitlezenDiv.html(uitlezen)

Zo ongeveer werkt het

Reageren

Inloggen om te reageren