在html數據屬性中存儲值的最佳方法是什麼

如果我想在一個數據屬性中的html中存儲多個值，那麼完成它的方法是什麼，以及如何使用jQuery來查找這些值？在html數據屬性中存儲值的最佳方法是什麼

在以下情況下，存儲值的最佳方法是什麼？逗號分隔，空格分隔。

如果我想找到標籤，其中"Mango"在data-fruit屬性中，我怎麼能找到它，而不使用for循環，如果條件？

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

來源

2017-02-23 Tejas Gaykar

我使用jQuery建立一個過濾器，其在某些章節中也有一些屬性多於一個的值，我只想對他們的應用過濾器。諸如$（li [data-fruit =''''芒果'+'「]'）這樣的查詢未能給出期望的結果。 –

可以在陣列格式持久化數據，那麼你可以使用.data()從元素獲取它。

$('.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>

作爲替代，您可以使用CSV和檢索的同時將其轉換爲一個數組

$('.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>

來源

2017-02-23 13:24:13 Satpal

謝謝，會用同樣的技巧。 –

你可以有一個字符串。該規範沒有爲該屬性中的數據定義任何特定的格式，該屬性旨在由特定於站點的JavaScript處理。

如果您願意，您的JavaScript可以your_data_attribute_value.split(" ");。

見this example

來源

2017-02-23 13:30:05

這將添加幾行代碼，我不想要。 –

https://jsfiddle.net/niteshgoyal27390/go6bn9ad/查看工作示例 –

在html數據屬性中存儲值的最佳方法是什麼

回答

相關問題