Ich habe eine Tabelle mit 33 Eingängen mit IDs zwischen 1 und 33. So reichen sie beispielsweise von "Preis-1" bis zu "Preis-33".

Anstatt diese Elemente einzeln einzeln zu definieren:

var p1 = document.getElementById("price-1");
var p2 = document.getElementById("price-2");

Wie kann ich automatisch zählen (möglicherweise nach dem Präfix price- zählen?) Und jedes dieser Elemente mit JavaScript (oder jQuery, wenn es einfacher ist) definieren?

4
tony 22 Feb. 2020 im 13:15

4 Antworten

Beste Antwort

Sie können versuchen, Attributselektoren zu verwenden (beginnt mit: - { {X0}}):

Stellt Elemente mit dem Attributnamen attr dar, dessen Wert vor dem Wert steht.

Demo: Verwenden von Vanilla JS:

var elList = document.querySelectorAll('[id^=price-]');
console.log(elList.length); //5

//loop throgh all the elements whose id starts with price-
var data = {};
elList.forEach(function(el){
  data[el.id] = el.value;
});
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="price-1" value="100"/>
<input id="price-2" value="200"/>
<input id="price-3" value="300"/>
<input id="price-4" value="400"/>
<input id="price-5" value="500"/>

ODER: Verwenden von jQuery

var count = $('[id^=price-]').length;
console.log(count); //5

//loop throgh all the elements whose id starts with price-
var data = {};
$('[id^=price-]').each(function(){
  data[this.id] = this.value;
});
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="price-1" value="100"/>
<input id="price-2" value="200"/>
<input id="price-3" value="300"/>
<input id="price-4" value="400"/>
<input id="price-5" value="500"/>
6
Mamun 22 Feb. 2020 im 12:24

Die Motivation, warum ich lieber ein data Feld verwenden möchte, liegt darin, dass ich id als eindeutige Kennung für das DOM-Element betrachte.

In Ihrem Beispiel wird nicht vorgeschlagen, dass der Preis eine eindeutige Kennung ist, sondern eine Problemumgehung, um das Crawlen des DOM nach Preiselementen zu ermöglichen.
Selbst wenn es sich um eine eindeutige Kennung handelt, beispielsweise um eine ID als Primärschlüssel aus einer Datenbank, würde ich so etwas wie data-id verwenden, da hier anschaulicher erwähnt wird, dass es sich um die tatsächlichen Daten anstelle der ID eines DOM-Elements, die möglicherweise nur eine allgemeine Beschreibung ist oder nicht, die sich lediglich auf die Eindeutigkeit konzentriert.

Aus diesem Grund ist es sinnvoller, ein generisches Attribut zur Identifizierung des Preises zu haben (dies alles, was Sie möchten, dass es semantisch ist), und Sie können benutzerdefinierte Datenfelder zuweisen, die Sie später in Ihrem Javascript-Code abrufen möchten.

Ohne Lust zu haben:

<div>
    <div data-type="price" data-price='5'>5<span>$</span></div>
    <div data-type="price" data-price='6'>6<span>$</span></div>
</div>

var prices = document.querySelectorAll("[data-type='price']");

for (let i = 0; i < prices.length; i++) {
    console.log('price:', prices[i].getAttribute('data-price'));
}

https://jsfiddle.net/b03c7ars/

1
Trace 22 Feb. 2020 im 11:05

Versuche dies:

document.querySelectorAll('[id^="price-"]').forEach((el, i) => console.log(el, i))
1
Jaber Alshami 22 Feb. 2020 im 10:36

Sie können querySelectorAll für diesen Zweck verwenden:

// Get all elements where id starts with `price` text
const prices = document.querySelectorAll('*[id^="price"]');

// Loop through each one of them
[...prices].forEach(price => {
  console.log('id: ', price.id);
  console.log('value: ', price.value);
});
<input type="text" id="price-1" value="10" />
<input type="text" id="price-2" value="20"/>
3
palaѕн 22 Feb. 2020 im 10:22