jQuery-Datenattr nicht eingestellt

Lesezeit: 4 Minuten

Dies scheint sehr einfach zu sein, aber ich kann nicht sehen, warum es nicht funktioniert. Der Selektor stimmt aber die div .faqContent wird einfach nicht mit aktualisiert data-height Attribut.

$('.faqItem .faqContent').each(function(){
    var h = $(this).height();
    $(this).data('height',h);
});

Ich habe das überprüft var h ist richtig, es steht in colsole.log da halt die höhe richtig.

BEARBEITEN
Es ist absolut kein Konflikt und die Konsole zeigt keine Fehler an.

  • FYI-Wert, der von .data() festgelegt wird, wird nicht wiedergegeben, während Sie diese Elemente untersuchen.

    – Rajaprabhu Aravindasamy

    8. Mai 2014 um 9:53 Uhr

  • versuchen, den Wert zu trösten. so erhalten Sie den Wert für jeden.

    – Renjith

    8. Mai 2014 um 9:54 Uhr

  • Wenn das Datenhöhenattribut bereits vorhanden ist und Sie versuchen, es zu aktualisieren, funktioniert es nicht … Sie müssen es verwenden .attr(data-height,h)

    – Susheel Singh

    8. Mai 2014 um 9:56 Uhr


Benutzer-Avatar
TJ Crowder

Das data Funktion verwirrt viele Leute, nicht nur Sie. 🙂

data verwaltet das interne Datenobjekt von jQuery für das Element, nicht data-* Attribute. data verwendet nur data-* Attribute zu setzen Anfangswerte, und mehr, es errät, welchen Typ diese haben sollen, basierend auf ihrem Aussehen (also wird etwas, das wie eine Zahl aussieht, in eine Zahl umgewandelt; etwas, das wie JSON aussieht, wird in ein Objekt umgewandelt). Das data Methode niemals setzt data-* Attribute auf Elemente, setzt es die Daten nur auf sein internes Datenobjekt. Das bedeutet, dass die beiden (das interne Datenobjekt und das Attribut) nicht mehr synchron sind:

const t = $("#target");
let value;

// Getting the attribute always gets a string
value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 1 (string)

// Using `.data`, jQuery will guess that because the attribute looks like a number,
// you want it converted to a number
value = t.data("height");
console.log(`${value} (${typeof value})`);  // 1 (number)

// `data` only sets the internal data object properties, not the attribute...
t.data("height", 2);

// ...so the attribute still has `"1"`
value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 1 (string)

// ...even though the data object has 2
value = t.data("height");
console.log(`${value} (${typeof value})`);  // 2 (number)
<div id="target" data-height="1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Wenn Sie tatsächlich eine festlegen möchten data-* Attribut, Verwendung attr:

$(this).attr("data-height", h);

const t = $("#target");
let value;

value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 1 (string)

// `attr` converts whatever you give it to string
t.attr("data-height", 2);

value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 2 (string)
<div id="target" data-height="1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Wenn Sie diese Informationen jedoch nur für die zukünftige Verwendung wünschen, data ist in Ordnung (vorausgesetzt, Sie sind mit der automatischen Typkonvertierung einverstanden), erwarten Sie jedoch nicht, dass es im DOM-Inspektor angezeigt wird, da jQuery diese Informationen nicht in das DOM schreibt.

  • großartige Antwort, löste das Rätsel des Datenattributs. Hut ab!

    – 112233

    6. Januar 2017 um 2:24 Uhr

Sie können es jedoch nicht im Elementinspektor sehen es ist dort da jquery das data-Attribut intern setzt.

Versuchen console.log($(this).data('height'));

  • Absolut genau richtig. Danke @Mohammad Adil, es ist da.

    – ggdx

    8. Mai 2014 um 9:57 Uhr

  • Wie verwirrend! Schreckliches Design. Trotzdem danke 🙂

    – Kann Poyrazoğlu

    3. Januar 2017 um 11:56 Uhr


  • @CanPoyrazoğlu Es wurde speziell auf diese Weise entwickelt, um aus Geschwindigkeitsgründen im Cache zu speichern, da es verschwenderisch ist, jedes Mal neu zu bewerten .data() Anruf

    – Jack

    16. Dezember 2018 um 18:44 Uhr

  • @JackNicholson das Design ist gut, nur der Name verwirrt mich (und anscheinend viele andere Leute).

    – Kann Poyrazoğlu

    16. Dezember 2018 um 19:54 Uhr

.data() speichert nur den zugehörigen neuen Wert im Speicher (bzw im Inneren). Es wird das Attribut im DOM nicht ändern, daher können Sie es nicht mit Inspektor-Tools aktualisiert sehen.

Um das Attribut zu ändern, können Sie verwenden .attr():

$('.faqItem .faqContent').each(function(){
    var h = $(this).height();
    $(this).attr('data-height',h);
});

JQuery .data() speichert den Wert im Element selbst, es fügt kein Attribut hinzu.

http://api.jquery.com/data/

Wenn Sie ein Attribut hinzufügen möchten, verwenden Sie attr:

$('.faqItem .faqContent').each(function(){
    var h = $(this).height();
    $(this).attr('data-height', h);
});

http://api.jquery.com/attr/

1180610cookie-checkjQuery-Datenattr nicht eingestellt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy