jQuery data attr nie ustawienie

Question

To wydaje się bardzo proste, ale nie widzę, dlaczego nie działa. Selektor jest poprawny, ale div .faqContent po prostu nie jest aktualizowany atrybutem data-height.

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

Sprawdziłem że var h jest poprawna, to w colsole.log jak słusznie trzymając wysokość.

EDIT To absolutnie nie konflikt, a konsola nie pokazuje żadnych błędów.

Answer 1

Nie będzie można zobaczyć go w inspektorze elementów, ale jest tam jako jquery ustawić atrybut danych wewnętrznie.

spróbować console.log($(this).data('height'));

Answer 2

Funkcja data myli wiele osób, nie tylko ty. :-)

data zarządza wewnętrzny obiekt danych jQuery dla elementu, niedata-* atrybuty. data używa tylko atrybutów data-* do ustawiania wartości początkowych . Nigdy nie ustawiadata-* atrybutów na elementach.

Jeśli chcesz faktycznie ustawić atrybut data-* użyć attr:

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

Ale jeśli chcesz tylko tych informacji do wykorzystania w przyszłości, data jest w porządku, po prostu nie należy się spodziewać, aby zobaczyć go w DOM inspektora, ponieważ jQuery nie zapisuje tej informacji w DOM.

Answer 3

.data() zapisuje tylko powiązaną nową wartość w pamięci (lub wewnętrznie). Nie spowoduje to zmiany atrybutu w DOM, dlatego nie można go zaktualizować za pomocą narzędzi inspektora.

Aby zmienić atrybut, można użyć .attr():

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

Answer 4

JQuery .data() przechowuje wartość na samego elementu, nie będzie dodać atrybut.

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

Jeśli chcesz dodać atrybut, należy użyć attr:

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

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