id nummer verkrijgen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Paul Weiss

Paul Weiss

15/03/2022 14:22:02
Quote Anchor link
Ik ben hier al even mee bezig, maar kan het antwoord niet echt vinden. Ik wil namelijk heel graag de waarde van de id achterhalen van het vorige element. Dus in onderstaande voorbeeld is dat dus "div1" zodra ik op de button klik in het element met id "div2" Heeft iemand een idee hoe deze functie eruit moet komen te zien? Alvast bedankt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
PHP hulp

PHP hulp

28/01/2023 14:43:54
 
Ward van der Put
Moderator

Ward van der Put

15/03/2022 15:02:19
Quote Anchor link
document.getElementById("div2").previousSibling.id
 
Paul Weiss

Paul Weiss

15/03/2022 15:20:25
Quote Anchor link
Hoi Ward. bedankt voor je reactie. ik heb nu het volgende toegevoegd. maar de waarde van de variable is dan "undefined".

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
var test = document.getElementById("div2").previousSibling.id;
  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)
PHP script in nieuw venster Selecteer het PHP script
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
<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.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

15/03/2022 18:22:41
Quote Anchor link
Is het niet handiger om een data attribuut toe te voegen? (Let ook op het woord this dat als parameter wordt meegegeven aan mijnfunctie)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<button data-id="div1" onclick="mijnfunctie(this)">
    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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
function mijnfunctie(that) {
  var id = that.getAttribute('data-id');
  document.getElementById(id).style.display = "block";
}
Gewijzigd op 15/03/2022 18:23:53 door Frank Nietbelangrijk
 
Paul Weiss

Paul Weiss

15/03/2022 18:42:12
Quote Anchor link
Hoi Frank. bedankt voor je antwoord. Dat gaat helaas niet werken. Bij de button geef je dan namelijk vooraf "div1" op. Het problem is dat ik. niet weet wat de waarde is van de id van de bovenstaande div element. Deze is namelijk variabel. Er komt namelijk ook een functie waarmee div elementen kunnen worden verwijderd. de volgorde van de div elementen kan dus ook zijn zoals hieronder getoond. Vandaar ook de functie ..previousElementSibling.id; functie die de de waarde achterhaalt van de element div van daarboven.

Onderstaande een voorbeeld hoe de elementen kunnen zijn, Maar dat is dus variabel en wijzigt continue.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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
 
Frank Nietbelangrijk

Frank Nietbelangrijk

15/03/2022 21:55:37
Quote Anchor link
Als er elementen tussen uit gehaald kunnen worden dan is mijn voorstel wellicht niet handig.

Probeer deze dan maar eens:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
function mijnfunctie(that) {
  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.
 
Paul Weiss

Paul Weiss

16/03/2022 09:21:17
Quote Anchor link
He frank. Bedankt voor je bericht. Die functie had ik al. Probleem waar ik mee zat was de insert before. die maakte gebruik van een vaste id. ik heb echter ook daarvoor al een oplossing gevonden. door aan de variable prev # vooraan toe te voegen. Het werkt nu allemaal zoals het moet. Enige probleem waar ik nu mee te maken krijg is om een div element in zijn geheel te vervangen voor een andere. Maar dat heeft verder niets met dit topic te maken.
Gewijzigd op 16/03/2022 09:21:40 door Paul Weiss
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.