Comment remplacer un mot spécifique dans l'attribut data- ?

Question

J'utilise un script qui ajoute une valeur d'attribut de données dynamique à partir du nom de classe des éléments - la deuxième partie est que je veux couper la valeur de l'attribut de données.

Exemples du html :

<div class="newgroup HardDrivesExternal" data-item-tags="newgroup HardDrivesExternal show"></div>

<div class="newgroup ServiceSuppor" data-item-tags="newgroup ServiceSupport"></div>

Je veux que ça ressemble à ça :

 <div class="newgroup HardDrivesExternal" data-item-tags="HardDrivesExternal"></div>

<div class="newgroup ServiceSuppor" data-item-tags="ServiceSupport"></div>

Dans l'exemple, je veux supprimer le premier et le troisième mot de la valeur de données - je ne peux pas le supprimer à partir de la classe d'éléments, je dois donc le faire à partir de l'attribut de données. De plus, le mot du milieu change de façon dynamique et je veux donc cibler les mots spécifiques - newgroup et show. Pour aggraver la situation, le mot show ne sera pas toujours une valeur.

Quelle est la meilleure façon de remplacer cette partie spécifique de la valeur ?

Answer 1

Comme je l'ai dit, vous pouvez utiliser split pour obtenir un tableau de mots et utiliser array.splice() pour obtenir le deuxième mot.

Note : J'ai utilisé .attr à mettre en place car .data(key, val) ne fonctionnait pas. Poste connexe . J'ai également mis à jour le texte de l'élément, pour montrer la valeur.

(function() {
  $.each($(".newgroup"), function(i, el){
    var attr = "item-tags";
    var val = $(el).data(attr).split(" ").splice(1,1)[0];
    $(el).attr("data-" + attr, val);
  })
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="newgroup HardDrivesExternal" data-item-tags="newgroup HardDrivesExternal show">test1 </div>

<div class="newgroup ServiceSuppor" data-item-tags="newgroup ServiceSupport"> test2</div>

Answer 2

Vous pouvez utiliser split()

$(document).ready(function() {
    var data = $('.HardDrivesExternal').attr('data-item-tags');
    var newdata = data.split(" ");
    newdata.shift();
    newdata.shift();
    alert(newdata.join(" "));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="newgroup HardDrivesExternal" data-item-tags="newgroup ServiceSupport show anotherTag"></div>