Функция Javascript не повторяется

Question

Я пытаюсь вертикально выровнять каждый .class на сайте с помощью Javascript. До сих пор я получил это:

<script type="text/javascript"> 
     function setContent() { 
      var windowHeight = 67; 
      if (windowHeight > 0) { 
       var contentElement = document.getElementById('center'); 
       var contentHeight = contentElement.offsetHeight; 
       if (windowHeight - contentHeight > 0) { 
        contentElement.style.position = 'relative'; 
        contentElement.style.top = ((windowHeight/2) - (contentHeight/2)) + 'px'; 
       } 
      } 
     } 
     window.onload = function() { 
      setContent(); 
     } 
    </script> 

Это работает, но только на первом элементе с ID-центром. Так как у меня 6 элементов, которые должны изменить Я изменил код для этого:

<script type="text/javascript"> 
     function setContent() { 
      var windowHeight = 67; 
      if (windowHeight > 0) { 
       var contentElement = document.getElementsByClassName('center'); 
       var contentHeight = contentElement.offsetHeight; 
       if (windowHeight - contentHeight > 0) { 
        contentElement.style.position = 'relative'; 
        contentElement.style.top = ((windowHeight/2) - (contentHeight/2)) + 'px'; 
       } 
      } 
     } 
     $('.center').each(function(){ 
      $(this).setContent(); 
     }); 
    </script> 

Я изменил document.getElementById («центр»); to document.getElementsByClassName ('center'); поэтому он принимает все классы (и да, я тоже изменил его в html). Я также добавил немного кода, который должен повторять функцию для каждого элемента с центром класса. Проблема в том, что она не работает, и я не могу понять, где она пойдет не так.

Любые идеи?

Answer 1

Try с этими изменениями:

 function setContent() { 
      var windowHeight = 67; 
      if (windowHeight > 0) { 
       var elems = document.getElementsByClassName('center'); 
       for(var i in elems) { 
        var contentElement = elems[i]; 
        var contentHeight = contentElement.offsetHeight; 
        if (windowHeight - contentHeight > 0) { 
         contentElement.style.position = 'relative'; 
         contentElement.style.top = ((windowHeight/2) - (contentHeight/2)) + 'px'; 
        } 
       } 
      } 
     } 
     window.onload = function() { 
      setContent(); 
     } 

Answer 2

document.getElementsByClassName('center') возвращает NodeList, содержащий все элементы с этим именем класса, а не один элемент. Если вы используете его, то вам нужно петля над ним.

Вы никогда не звоните setContent().

Вы звоните $(this).setContent();. Если мы предположим, что $ является JQuery, то вы должны выразить setContent как плагин JQuery, и получить элемент из this вместо поиска в DOM (так как вы уже обыскали DOM с $('.center') вызова.

Answer 3

Попробуйте это :

function setContent(contentElement) { 
    var windowHeight = 67; 
    if (windowHeight > 0) { 
     var contentHeight = contentElement.offsetHeight; 
     if (windowHeight - contentHeight > 0) { 
      contentElement.style.position = 'relative'; 
      contentElement.style.top = ((windowHeight/2) - (contentHeight/2)) + 'px'; 
     } 
    } 
} 
$('.center').each(function(){ 
    setContent(this); 
}); 

Answer 4

Прежде всего, как вы можете видеть document.getElementByClassName не возвращает только один единственный DOM-элемент, в Вместо этого вы получаете NodeList всех узлов, у которых есть класс «центр».
И поскольку NodeList не имеет стиля собственности, ваши изменения не влияют.

$('.center').each(function(){ 
    $(this).setContent(); 
}); 

Здесь вы перебирать все элементы с классом «центра», но вы пытаетесь вызвать функцию, которая на самом деле не существует на тех элементах, так что это не влияет ни.

Как вы используете JQuery я рекомендую вам попробовать это:

<script type="text/javascript"> 
    function setContent(contentElement) { 
     var windowHeight = 67; 
     if (windowHeight > 0) { 
      var contentHeight = contentElement.offsetHeight; 
      if (windowHeight - contentHeight > 0) { 
       contentElement.style.position = 'relative'; 
       contentElement.style.top = ((windowHeight/2) - (contentHeight/2)) + 'px'; 
      } 
     } 
    } 
    window.onload = function() { 
     var centerElements = document.getElementByClassName('center') 
     for(var i = 0; i < centerElements.length; i+=1) 
      setContent(centerElements[i]); 
    } 
</script>