Pourquoi ne pas les changements de jQuery $.fn.de données() mise à jour le correspondant html 5 de données* les attributs?

Voici un exemple simple pour illustrer le comportement:

Compte tenu de ce balisage html:

<div data-company="Microsoft"></div>

et ce jQuery code (à l'aide de jQuery 1.5.1):

//read the data
alert($("div").data("company"));
//returns Microsoft <<< OK!

//set the data
$("div").data("company","Apple");
alert($("div").data("company"));
//returns Apple <<< OK!

//attribute selector
alert($("div[data-company='Apple']").length);
//returns 0  <<< WHY???

//attribute selector again
alert($("div[data-company='Microsoft']").length);
//returns 1  <<< WHY???

//set the attribute directly
$("div").attr("data-company","Apple");
alert($("div[data-company='Apple']").length);
//now returns 1 <<< OK!

Depuis jQuery importe automatiquement le HTML5 données* en jQuery données de l'objet, ne pas les attributs être mis à jour lorsque les données changent?

  • "div[data-company='Apple'" - vous oublié de le fermer avec ]
InformationsquelleAutor James H | 2011-03-31
  1. 51

    Normalement, il n'y a pas besoin d'allers-retours .data()'s si vous êtes cohérent dans l'utilisation .data() pour accéder à/définir/modifier les données sur les éléments DOM. Pour cette raison, il est préférable d'éviter la surcharge des performances de l'accès au DOM pour tous les .data() définir/modifier le fonctionnement (.data() stocke ses valeurs dans jQuery.cache en interne).

    Si vous voulez forcer l'aller-retour le comportement de vous-même, vous pouvez vous abonner à la "setData" ou "changeData événements", puis appuyez sur le .data() mise à jour de ces événements à travers correspondant à l'élément du DOM via .attr().

    • Qui fait sens - quelle serait alors la méthode préférée pour l'aide .de données() dans le contexte d'un sélecteur? Dire que je voulais accéder à tous les éléments de données de l'entreprise='Microsoft' qui ont été mis en/modifié avec .de données()?
    • Je ne pense pas qu'il y a une méthode simple pour interroger les .data() cache. Si vous souhaitez utiliser un sélecteur comme ça, vous auriez besoin de mettre en œuvre les allers-retours sur "changeData" cas que j'ai mentionné. Ensuite, vous pouvez garder vos données d'attributs en synchronisation avec .data() changements (et vous seriez en mesure de le faire que de manière sélective, sur les éléments que vous avez l'intention d'interroger plus tard).
    • Merci, Dave! Btw, j'ai aimé ta série sur tekpub.
    • Merci, heureux de l'entendre. Si vous n'avez pas fait tout le chemin à la fin encore, nous parlons de comment gérer les "changeData" événement dans l'épisode 10 ou 11, qui serait utile ici.
    • Plus grand chose à corriger dans jQuery: utilisation .data() de définir les données sur un nouvel élément, puis l'ajouter à la cathédrale, puis le récupérer à partir du DOM, puis de trouver qu'il n'y a pas de données. La documentation n'est pas de tirage presque assez d'attention que vous devez utiliser .attr('data-...') dans ce scénario.
    InformationsquelleAutor Dave Ward
  2. 17

    C'est le bon comportement en fonction de l'docs:

    Les attributs data - sont tirés dans le premier moment, les données de la propriété est accessible et puis ne sont plus accessibles ou muté (toutes les valeurs de données sont ensuite enregistrées dans la mémoire interne en jQuery).

    (à partir de: http://api.jquery.com/data)

    • Est-ce toujours le cas ou était-il changé dans l'une des versions?
    • Il ressemble à ce qui a toujours été le cas. La citation ci-dessus à partir de la documentation est également dans les notes de version de 1.4.3 lorsque cette fonction a été d'abord publié: blog.jquery.com/2010/10/16/jquery-143-released
    InformationsquelleAutor Craig
  3. 0

    La requête sélecteur de [data-company] vérifications sur les attributs, tout en .data ne pas les mettre à jour.

    Vous pouvez modifier le code pour utiliser uniquement .attr('data-, éviter .data complètement.

    Vous pouvez définir votre propre fonction qui met à jour les données et attr:

    //update both data and corresponding attribute 'data-x'
$.fn.attrdata = function (a, b)
{
    if (arguments.length > 1)
        this.attr('data-' + a, b);
    else if (typeof a === 'object')
        this.attr(Object.keys(a).reduce(function (obj, key)
        {
            obj['data-' + key] = a[key];
            return obj;
        }, {}));
    return this.data.apply(this, arguments);
};

    Utiliser comme ceci:

    $("div").attrdata("company", "Apple");
$("div").attrdata({company: "Apple"}); //also possible
console.log($("div").data("company")); //Apple
console.log($("div").attr("data-company")); //Apple
console.log($("div[data-company='Apple']").length); //1

    Si vous n'utilisez pas les sélecteurs CSS, vous pouvez créer votre propre sélecteur jQuery:

    $.expr[':'].data = function(elem, index, match) {
  var split = match[3].split('=');
  return $(elem).data(split[0]) == split[1];
};

    Utiliser comme ceci:

    $("div").attr("data-company", "Microsoft");
$("div").data("company", "Apple");
console.log($('div:data(company=Apple)').length); //1
console.log($('div[data-company="Apple"]').length); //0

    https://jsfiddle.net/oriadam/a14jvqcw/

    InformationsquelleAutor oriadam