id nummer verkrijgen
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="div1"> <p>Mijn tekst hier</p></div>
<div id="div2">
<p>mijn 2e tekst hier</p>
<button onclick="mijnfunctie()">
Klik hier om id van het vorige element te zien te krijgen
</button>
<div id="div2">
<p>mijn 2e tekst hier</p>
<button onclick="mijnfunctie()">
Klik hier om id van het vorige element te zien te krijgen
</button>
Code (php)
1
2
2
var test = document.getElementById("div2").previousSibling.id;
alert(test);
alert(test);
Toevoeging op 15/03/2022 15:47:22:
Ik ben er al achter hoe dit te realiseren. Zie onderstaande code. zodra je op de button klikt krijg je de waarde te zien van de id van het vorige element. Bovendien worden beide div met elkaar verwisseld. Want daar wilde ik de functie voor maken.
Echter ik wil i.p.v. #div1 na insert before de variable "prev" gebruiken. prev is namelijk de waarde van de id van het vorige element. Heeft iemand een idee hoe ik dit kan realiseren?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<h1>eeste rij</h1>
</div>
<div id="div2">
<h1>tweede rij</h1>
<button onclick="wisselen()">
Wissel met bovenste rij
</button>
</div>
<script>
function wisselen() {
var item = document.querySelector('#div2');
var prev = item.previousElementSibling.id;
alert (prev);
$("#div2").insertBefore("#div1");
}
</script>
</body>
</html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<h1>eeste rij</h1>
</div>
<div id="div2">
<h1>tweede rij</h1>
<button onclick="wisselen()">
Wissel met bovenste rij
</button>
</div>
<script>
function wisselen() {
var item = document.querySelector('#div2');
var prev = item.previousElementSibling.id;
alert (prev);
$("#div2").insertBefore("#div1");
}
</script>
</body>
</html>
Toevoeging op 15/03/2022 15:55:09:
Hoe ward, nog wel bedankt voor je hulp uiteraard. zonder jouw was ik er niet achter gekomen. Als je query gebruikt lukt het wel.
Toevoeging op 15/03/2022 17:42:30:
Heeft iemand een idee om i.p..v #div de variable prev te gebruiken. Is dat überhaupt mogelijk? of moet ik het anders definiëren? ben er al weer uurtjes mee bezig. Maar lukt mij simpelweg niet. Alle hulp is welkom. Ik heb geen idee.
Code (php)
1
2
3
2
3
<button data-id="div1" onclick="mijnfunctie(this)">
Klik hier om id van het vorige element te zien te krijgen
</button>
Klik hier om id van het vorige element te zien te krijgen
</button>
En dan aan de hand van het data attribuut de div laten zien:
Code (php)
1
2
3
4
2
3
4
function mijnfunctie(that) {
var id = that.getAttribute('data-id');
document.getElementById(id).style.display = "block";
}
var id = that.getAttribute('data-id');
document.getElementById(id).style.display = "block";
}
Gewijzigd op 15/03/2022 18:23:53 door Frank Nietbelangrijk
Onderstaande een voorbeeld hoe de elementen kunnen zijn, Maar dat is dus variabel en wijzigt continue.
Code (php)
1
2
3
4
5
2
3
4
5
div id="div1"><h1>tekst hier</h1></div>
<div id="div8"><h1>tekst hier</h1></div>
<div id="div13"><h1>tekst hier</h1></div>
<div id="div8"><h1>tekst hier</h1></div>
<div id="div13"><h1>tekst hier</h1></div>
Toevoeging op 15/03/2022 18:45:59:
Wat ik bedoel is dus:. de id waarde van het element boven "div13" is "div8" . Maar wanneer ik "div8" verwijder is dat dus "div1". Dat veranderd dus steeds. Ik ben met een klein sms system bezig waarbij elementen boven elkaar komen te staan. Ik kan elementen vervolgens toevoegen, verwijderen en wisselen. de gehele inhoud sla ik dan op in een database
Gewijzigd op 15/03/2022 19:03:31 door Paul Weiss
Probeer deze dan maar eens:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="div1"> <p>Mijn tekst hier</p></div>
<div id="div2">
<p>mijn 2e tekst hier</p>
<button onclick="mijnfunctie(this)">
Klik hier om id van het vorige element te zien te krijgen
</button>
</div>
<div id="div2">
<p>mijn 2e tekst hier</p>
<button onclick="mijnfunctie(this)">
Klik hier om id van het vorige element te zien te krijgen
</button>
</div>
Code (php)
1
2
3
2
3
function mijnfunctie(that) {
alert(that.closest("div").previousElementSibling.id);
}
alert(that.closest("div").previousElementSibling.id);
}
Toevoeging op 15/03/2022 21:58:44:
"that" is je button. Met closest("div") pak je div2 en met previousElementSibling pak je het element voor div2 welke div1 is.
Toevoeging op 15/03/2022 22:00:32:
Het probleem met deze constructie is echter dat de volgorde van je elementen erg belangrijk is. Ga je later weer aan je HTML sleutelen dan breekt deze constructie al voordat je het weet.
Gewijzigd op 16/03/2022 09:21:40 door Paul Weiss