jQuery map() metódus

map(), azaz, térkép() metódus.

map() metódus.         Létrehoz egy új tömböt funkcióval meghatározottak alapján, a szelektorral lekérdezett eredményből.

Megjegyzés:
          - jQuery objektum, álcázott tömb formátumban tárolja, szelektor által visszaadott eredményhalmazt.
          - map() meghatározott funkcióval,  egyszer meghív minden tömbb elemet, azok sorrendjében.
          - map() metódus, nem hajtja végre a funkciót, tömb elemeinek érték megadása nélkül.
          - map() metódus, nem módosítja az eredeti tömböt.

map() példák.

Kiválasztott elem, gyermek elemeinek címkéje.

<head>
<script>
$(document).ready(function(){
// -- Szülőelem gyermekei. -----------------------------------------------------------------------

// ------- Lekérdezés map() metódus nélkül, for i++ ciklussal.
    $("#for").click(function(){
		var Gyerekek = $("#Szulo").children();     var Gyszam=Gyerekek.length;
			for(i=0; i < Gyszam; i++){
				var elem=Gyerekek[i].tagName;
				$("#cimkek").after("<h5>"+i+". " + elem + "</h5>");
			}
		$("#cimkek").after("<h5>Gyermekek száma: " + Gyszam + "</h5>");
	});

// ------- Lekérdezés map() metódussal, és for i++ ciklussal, get() és join(", ") meghatározás nélkül.
    $("#mapfor01").click(function(){
		var Gyerekek = $("#Szulo").children() .map( function(){return this.tagName;});
		var Gyszam=Gyerekek.length;
		for(i=0; i<Gyszam; i++){
					var elem=Gyerekek[i];
					$("#cimkek").after("<h5>"+i+". " + elem + "</h5>");
			}
		
		$("#cimkek").after("<h5>Gyermekek száma: " + Gyszam + "</h5>");
	});

// ------- Lekérdezés map() metódussal, és for i-- ciklussal, get() és join(", ") meghatározás nélkül.
    $("#mapfor02").click(function(){
		var Gyerekek = $("#Szulo").children() .map( function(){return this.tagName;});
		
		var Gyszam=Gyerekek.length;
		
		for(i=Gyszam-1; i > -1; i--){
		var elem=Gyerekek[i];
		$("#cimkek").after("<h5>"+i+". " + elem + "</h5>");
		}
		
		$("#cimkek").after("<h5>Gyermekek száma: " + Gyszam + "</h5>");
	});

// -------1.Példa: Lekérdezés map(), get() és join(", ") meghatározással.
    $("#map01").click(function(){
		var Gyerekek = $("#Szulo").children() .map( function() { return this.tagName; } ) .get() .join(", ");
		
		// Eredmény kiíratása.
		$("#cimkek").after("<p><b>" + Gyerekek + "</b><p>");
		
		var Gyszam=Gyerekek.length;
		$("#cimkek").after("<h5>Gyermekek száma: " + Gyszam + "</h5>");
	});

// -------2.Példa: Lekérdezés map(), get() és join(", ") meghatározással.
    $("#map02").click(function(){
		var tomb = $("#Szulo").children().map(function(){return this.tagName;})
		uj_tomb=tomb.get().join(", ");
		$("#cimkek").after("<h3>" + uj_tomb + "</h3>");
		
		var tombhossz=tomb.length;
		var uj_tombhossz=uj_tomb.length;
		
		$("#cimkek").after("<h5>Gyermekek száma: " + tombhossz + "<br /> Új érték: "+uj_tombhossz+"</h5>");
	});
});
</script>
</head>
<body>

<h5>Címsor <span> elem a címsorban. </span></h5>

<p> Bekezdés <span> elem, a p elemben. </span></p>

<pre> Pre elem.</pre>

<p> Bekezdés. </p>

<div>

<p> Bekezdés <span> elem, a p elemben. </span></p>

<pre> Pre elem.</pre>

</div>

<pre> Pre elem <span> elem, a pre elemben. </span> </pre>

</div>

<!-- Eredmény kiíratása. -->
<div id="cimkek">Közvetlen gyermekek címkéi:</div>

<!-- Button gomb. -->
<button id="map01">Gyermek elemek címkéi.<br />Kattints ide!</button>

</body>

Kiválasztott id="Szulo" elem, közvetlen gyermekeinek címkéi:

Kiválasztott elemek tartalmának lekérdezése.

<head>
<script>
$(document).ready(function(){
// ----- Lekérdezés: map(function() és .get().join(", "); meghatározással.
     $("#map03").click(function(){
         var Gyerekek = $("#Szulo").children().map(function(){return this.innerHTML;}).get().join(", ");
             $("#cimkekTartalma").after(Gyerekek);
     });
	 
// ----- Lekérdezés: map(function() és for i++ meghatározással.
    $("#map04").click(function(){
		var Gyerekek = $("#Szulo").children().map(function(){return this.innerHTML;});
		var Gyszam=Gyerekek.length;
		
         for(i=0; i<Gyszam; i++){
               var elem=Gyerekek[i];
               $("#cimkekTartalma").append(elem+"<br />");
            }
	});	
});
</script>
</head>
<body>

További map() példák.

Minden tömbelem értékét, felszorozzuk egy tetszőleges számmal.

<html>
<body>

<p>Input ablakában határozzuk meg a szorzó számot. Majd kattintsunk a button gombra, 
hogy felszorozza minden elemét a tömbnek, a megadott számmal.</p>

<p>Szorzószám: <input type="number" id="Szorzas" value="10"></p>

<button onclick="sajatFunction()">Kattints ide!</button>

<p>Új tömb adatai: <span id="Eredmeny"></span></p>

<script>
var eredetiSzamok = [5, 34, 112, 24];

function tombElemekSzorzasa(szorzando) {
    return szorzando * document.getElementById("Szorzas").value;
}

function sajatFunction() {
  document.getElementById("Eredmeny").innerHTML = eredetiSzamok.map(tombElemekSzorzasa);
}
</script>

</body>
</html>

Input ablakában, határozzuk meg a szorzószámot,
és kattintsunk a button gombra.

Szorzószám:

Új tömb adatai, ezek lesznek:

Tömbben tárolt minden egyes személy, teljes nevének lekérdezése.

<body>
<p>Tömbben tárolt személyek, teljes nevének lekérdezése:</p>

<button onclick="sajatFunkcio()">Kattints ide!</button>

<p>Új tömb adatai: <span id="Nevek"></span></p>

<script>
var nevjegyzek = [
    {vezetekneve : "Kiss", utoneve: "Endre"},
    {vezetekneve : "Nagy", utoneve: "Ferenc"},
    {vezetekneve : "Virág", utoneve: "Mária"}
];

function kapottTeljesNev(adat,index) {
    var teljesnev = [adat.vezetekneve,adat.utoneve].join(" ");
    return teljesnev;
}

function sajatFunkcio() {
    document.getElementById("Nevek").innerHTML = nevjegyzek.map(kapottTeljesNev);
}
</script>
</body>

Tömbben tárolt személyek, teljes nevének lekérdezése:

Új tömb adatai, ezek lesznek: