Was ist der beste Ansatz zum Speichern von Werten in HTML-Datenattribut

Question

Wenn ich mehr als einen Wert in HTML in einem Datenattribut speichern möchte, was ist der Ansatz, um es zu erledigen, und wie kann ich diese Werte mit jQuery finden ?

Im folgenden Fall, Was ist der beste Ansatz zum Speichern von Werten? Komma getrennt, Leerzeichen getrennt.

Und wenn ich die <li> Tags, die "Mango" in Daten-Frucht-Attribut haben möchten, wie finde ich es ohne Verwendung von for-Schleifen und wenn Bedingungen?

<ul class = "Fruits"><li data-fruit="Mango,Apple">Mango And Apple </li><li data-fruit="Mango,Strawberry"> Mango And Strawberry</li><li data-fruit="Apple,Strawberry"> Apple And Strawberry</li> </ul>

Answer 1

Sie können Daten in Array-Format bestehen bleiben, dann können Sie .data() verwenden Sie es von Element zu holen.

$('.Fruits li').filter(function() { 
 
    return $(this).data('fruit').includes('Mango'); 
 
}).addClass('red')

.red { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="Fruits"> 
 
    <li data-fruit="['Mango','Apple']">Mango And Apple </li> 
 
    <li data-fruit="['Mango','Strawberry']"> Mango And Strawberry</li> 
 
    <li data-fruit="['Apple','Strawberry']"> Apple And Strawberry</li> 
 
</ul>

Als Alternative können Sie CSV verwenden und während es das Abrufen umwandeln in ein Array

$('.Fruits li').filter(function() { 
 
    return $(this).data('fruit').replace(/ /g, '').split(',').includes('Mango'); 
 
}).addClass('red')

.red { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="Fruits"> 
 
    <li data-fruit="Mango,Apple">Mango And Apple </li> 
 
    <li data-fruit="Mango,Strawberry"> Mango And Strawberry</li> 
 
    <li data-fruit="Apple,Strawberry"> Apple And Strawberry</li> 
 
</ul>

Answer 2

Sie können eine Zeichenfolge haben. Die Spezifikation definiert kein bestimmtes Format für die Daten im Attribut, das für die Verarbeitung durch Site-spezifisches JavaScript ausgelegt ist.

Ihr JavaScript kann your_data_attribute_value.split(" ");, wenn Sie möchten.

Siehe this example