div yüksekliğini bulmak her zaman sıfır jquery döndürür

Div'in yüksekliğini bulmak için jQuery kullanıyorum, ancak her zaman sıfır döndürür. Kromun kontrol elemanı CSS penceresinde div'in yüksekliğini açıkça görebiliyorum.

<div class="findheight">some text here</div>//original height is 21px

Ama aşağıdakileri yaptığımda sıfır döndürür:

$('.findheight').height() //it always returns zero. really making me sick 

Bu yüzden, div'in üstüne height yöntemini çağırdığımda ve aşağıdaki gibi yaptığımda, metinlerin olamayacağını düşündüm.

  if($('.findheight').text().length > 6){
      alert($('.findheight').height());//This also returns zero so weird 
 }

Ayrıca windows.timeout çağrısını ayarlayarak da denedim, ancak bu herhangi bir gecikme süresinde yardımcı olmaz.

Herhangi biri neden sürekli sıfır alıyorum bana yardımcı olabilir?

2
Öğeniz görünmez mi ( görüntü: yok )? Görünmez elemanların yüksekliği yoktur.
katma yazar Amadan, kaynak
Height() yerine outerHeight() kullanmayı denediniz mi?
katma yazar arjabbar, kaynak
length - Sizden kaç tane findheight sınıfı var? Dinamik olarak yeni öğeler mi yaratıyorsunuz? Eski elemanlar kaldırılıyor mu yoksa değiştiriliyor mu? 6 öğeniz varsa (örneğinize göre), yalnızca ilk öğenin yüksekliği (bu sınıfa sahip) da döndürülür.
katma yazar Jack, kaynak
length - Sizden kaç tane findheight sınıfı var? Dinamik olarak yeni öğeler mi yaratıyorsunuz? Eski elemanlar kaldırılıyor mu yoksa değiştiriliyor mu? 6 öğeniz varsa (örneğinize göre), yalnızca ilk öğenin yüksekliği (bu sınıfa sahip) da döndürülür.
katma yazar Jack, kaynak
Konsolda herhangi bir hata var mı? findheight sınıfında birden fazla div var mı? jQuery dahil mi? Sorunuzda yeterli bilgi yok, çünkü kod işlevsel.
katma yazar Jonathan, kaynak
$ ('. findheight') ne kadardır; uzunluk; göstermek?
katma yazar bassxzero, kaynak
bulmak için CSS paylaşır mısın?
katma yazar Ebad Masood, kaynak
@ Amadan'ın noktasına eklemek için; Üst öğelerin de ekran olmadığından emin olun: bunlarda hiçbiri yok.
katma yazar KillahB, kaynak
@ Amadan'ın noktasına eklemek için; Üst öğelerin de ekran olmadığından emin olun: bunlarda hiçbiri yok.
katma yazar KillahB, kaynak

8 cevap

If the content of your divs are loaded dynamically, then you will need to use window.load event to get its correct height as discussed here: https://stackoverflow.com/a/13071846/1845408

$(window).load(function() {
    alert($('.findheight').height()); 
});
0
katma
@rakeeee bunu <script></script> içindeki html kapanış etiketinin hemen önüne koymanıza ne dersiniz?
katma yazar renakre, kaynak
Bu ilginç bir durum olabilir. Ancak, bu div kabın bir parçası olduğu için bu yükleme işlevini nereden arayacağınızdan emin değilsiniz. Eğer konteyner yüklenmezse sadece içi dolu div var.
katma yazar rakeeee, kaynak

If the content of your divs are loaded dynamically, then you will need to use window.load event to get its correct height as discussed here: https://stackoverflow.com/a/13071846/1845408

$(window).load(function() {
    alert($('.findheight').height()); 
});
0
katma
@rakeeee bunu <script></script> içindeki html kapanış etiketinin hemen önüne koymanıza ne dersiniz?
katma yazar renakre, kaynak
Bu ilginç bir durum olabilir. Ancak, bu div kabın bir parçası olduğu için bu yükleme işlevini nereden arayacağınızdan emin değilsiniz. Eğer konteyner yüklenmezse sadece içi dolu div var.
katma yazar rakeeee, kaynak

Kodunuzu jsfiddle içine kopyaladığınızda yükseklik 18

<div class="findheight">some text here</div>//original height is 21px
alert($('.findheight').height());
0
katma

Bu, belirli bir yükseklik/genişlik bu öğe için ayarlanmadığında VEYA iç/dış öğeler için CSS, yükseklik/genişlik değerini 0 olarak ayarladığında;

Bunun gibi yükseklik/genişlik elde etmek için açıkça yükseklik/genişlik ayarlamanız gerekir.

0
katma

.height() , tam olarak CSS'nin height özelliğini alır.

Dinamik bir içerik ise, ilgili olayda bunu halletmeniz gerekir.

Örneğin:

  1. Sayfadaki içerikle @renakre'in dediği gibi çalışıyorsanız, $ (window) .load() veya $ (document) .load() kullanın aramayı tetiklemek için.

  2. Kodladığınız başka bir işlemden oluşturulan bir içerik ise, ilgili olayı bağlamak zorundasınız. Bunun bir tıklama veya üzerinde olduğunu varsayalım:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).load(function() {
 //Shows the height on page load
  console.log($('.findheight').height());
  
  $('#another-element-ID').click(function() {
   //.. code which populate the div dynamicaly
    
   //Shows the height
    console.log($('.findheight').height());
  });
  
  $('.another-element-class').on('change', function() {
   //.. code which populate the div dynamicaly
    
   //Shows the height
    console.log($('.findheight').height());
  });
});
</div> </div>

Umarım bu size yardımcı olabilir.

0
katma

Bunu yapmayı deneyin:

$('div.findheight').height(); 
0
katma
Çalışmıyor teşekkürler çalıştı
katma yazar rakeeee, kaynak

Domuzu hazır olduğunda çalıştırılan bir işleve jQuery sardınız mı?

$(document).ready(function(){
  console.log($('.findheight').height());
});

Benim için çalışıyor, aksi halde hatanız tarayıcıya özgü olabilir.

Here is a jsfiddle of it working. Just check your console. https://jsfiddle.net/lesshardtofind/vzxd4t57/

Herhangi bir nedenden ötürü, Meteor, Ember, React veya Angular gibi dinamik olarak yerleştirilmiş çerçevelerde çalışmak gibi hazır belgelerdeki öğeye erişiminiz olmazsa, her nesnenin işlevlerinizi kaydetmek için bir kancası vardır.

Aksi takdirde, geçişler arasındaki bir elemana erişmeye çalışıyor olsaydınız bir aralık belirleyebilirsiniz.

var interval;
var timeout = setTimeout(function(){
  clearInterval(interval)
}, 10000);//destroy interval after 10 seconds to prevent memory leak
interval = setInterval(function(){
  if($('.findheight').length > 0){ 
   //execute your code here because you know this element is in the dom
    clearInterval(interval);
    clearTimeout(timeout);
   //clear both timeout and interval
  }
}, 100);//loop every 100 milliseconds to "poll" for the node in the dom
0
katma

Domuzu hazır olduğunda çalıştırılan bir işleve jQuery sardınız mı?

$(document).ready(function(){
  console.log($('.findheight').height());
});

Benim için çalışıyor, aksi halde hatanız tarayıcıya özgü olabilir.

Here is a jsfiddle of it working. Just check your console. https://jsfiddle.net/lesshardtofind/vzxd4t57/

Herhangi bir nedenden ötürü, Meteor, Ember, React veya Angular gibi dinamik olarak yerleştirilmiş çerçevelerde çalışmak gibi hazır belgelerdeki öğeye erişiminiz olmazsa, her nesnenin işlevlerinizi kaydetmek için bir kancası vardır.

Aksi takdirde, geçişler arasındaki bir elemana erişmeye çalışıyor olsaydınız bir aralık belirleyebilirsiniz.

var interval;
var timeout = setTimeout(function(){
  clearInterval(interval)
}, 10000);//destroy interval after 10 seconds to prevent memory leak
interval = setInterval(function(){
  if($('.findheight').length > 0){ 
   //execute your code here because you know this element is in the dom
    clearInterval(interval);
    clearTimeout(timeout);
   //clear both timeout and interval
  }
}, 100);//loop every 100 milliseconds to "poll" for the node in the dom
0
katma