Danke im Voraus
Ich frage mich, wie ich viele Werte aus einem Codeblock erhalten kann. Ich weiß nicht, ob ich ein Array oder etwas anderes verwenden muss. Ich bin neu bei js
Betrachten Sie den HTML-Code
<div class="row">
<div class=" available seat" data="C-08" ></div>
<label>C-08</label>
<div class=" available seat" data="D-08"></div>
<label>D-08</label>
<div class=" available seat" data="E-08"></div>
<label >E-08</label>
</div>
Ich muss die Rücksitznummern der einzelnen Sitze wie ...... E08 FO8 ETC erhalten
Was ich getan habe ist
let selectedSeats=document.querySelectorAll('.row .seat.available');
let seatNumber=[]
selectedSeats.forEach((sts)=>{
seatNumbers=[sts.nextElementSibling.innerText];
});
console.log(seatNumbers);
Ich bekomme nur die letzte Sitznummer im Log
Bitte sagen Sie mir, wie ich alle Sitznummern bekommen kann
4 Antworten
Verwenden Sie Array # Push, um zu pushen Text zu Ihrem seatNumber Array [].
Auch anstelle von nextElementSibling würde ich die Verwendung von neuem Datenattribute, die viel feasible und einfach zu verwenden sind.
Durch die Verwendung von Datenattributen wird sichergestellt, dass Sie exakte Daten von div und nicht unerwünschte Leerzeichen oder usw. usw. von label erhalten.
Bearbeiten: Da Sie hervorgehoben haben, dass Sie nur eindeutige Werte pushen und Duplikate vermeiden möchten, können Sie mit IndexOf() überprüfen, ob das Array die vorhandene Sitzplatznummer enthält. Es werden nur die eindeutigen Sitznummern angezeigt.
Live-Demo:
let selectedSeats = document.querySelectorAll('.row .seat.available');
let seatNumber = []
selectedSeats.forEach((sts) => {
let seats = sts.getAttribute('data') //get seat number
if (seatNumber.indexOf(seats) === -1) {
seatNumber.push(seats); //only push unique seats in to the array
}
});
console.log(seatNumber);<div class="row">
<div class="available seat" data="C-08"></div>
<label>C-08</label>
<div class="available seat" data="A-02"></div>
<label>A-02 - duplicate</label>
<div class="available seat" data="D-08"></div>
<label>D-08</label>
<div class="available seat" data="A-02"></div>
<label>A-02 - </label>
<div class="available seat" data="E-08"></div>
<label>E-08</label>
<div class="available seat" data="E-08"></div>
<label>E-08 duplicate</label>
</div>Ihr forLoop wird bei jeder Iteration überschrieben.
Sie sollten versuchen, die push () -Methode wie folgt zu verwenden:
let selectedSeats = document.querySelectorAll(".row .seat.available");
let seatNumber = [];
selectedSeats.forEach((sts) => {
seatNumber.push(sts.nextElementSibling.innerText);
});
console.log(JSON.stringify(seatNumber));
Das Konsolenprotokoll mit dem analysierten JSON führt dazu:
["C-08","D-08","E-08"]
Sie sollten push verwenden, anstatt einem neuen Array zuzuweisen
let selectedSeats = document.querySelectorAll('.row .seat.available');
let seatNumbers = []
selectedSeats.forEach((sts) => {
seatNumbers.push(sts.nextElementSibling.innerText);
});
console.log(seatNumbers);<div class="row">
<div class=" available seat" data="C-08"></div>
<label>C-08</label>
<div class=" available seat" data="D-08"></div>
<label>D-08</label>
<div class=" available seat" data="E-08"></div>
<label>E-08</label>
</div>Sie können map from javascript verwenden, um ein Array zurückzugeben. Beispiel
const seatNumbers = selectedSeats.map(sts => sts.nextElementSibling.innerText);
Dadurch werden alle Sitznummern in der gleichen Reihenfolge der ausgewählten Sitze zurückgegeben.