使用jquery獲取跨度的高度

我正在嘗試將一系列SPAN垂直居中放在其父LIs中間。使用jquery獲取跨度的高度

返回的高度值都是相同的，這意味着這段代碼必定有問題，因爲某些跨度位於兩行上。

不知道如果獲取內聯元素（跨度）的高度是一個問題，任何建議表示讚賞。

HTML：

<li class="nav-level-2-item"> 
    <a href=""> 
    <span class="menu-item">Text</span> 
      </a> 
      </li> 

<li class="nav-level-2-item"> 
    <a href=""> 
    <span class="menu-item">Longer Text</span> 
      </a> 
      </li> 

</ul>

JS：

$(document).ready(function() { 

    var navItem = $('li.nav-level-2-item'); 

    navItem.each(function() { 
     var containerHeight = $('li.nav-level-2-item').height(); 
     var spanHeight = $('span.menu-item').height(); 
     alert(spanHeight) 
     $('span.menu-item').css('top', (containerHeight - spanHeight)/2); 
    }); 
});

來源

2013-09-26 ecolema

跨度沒有高度 –

您的目標是什麼？你想要做什麼？ – j08691

改爲使用DIV，@YuriyGalanter是正確的 - span是無尺寸的元素，根據它所包含的任何內容進行更新......或者甚至更好，利用已經存在的A標籤:) –

我不知道這是否適用於你的代碼，但也許你可以完全通過使<li>元素inline-block的和垂直居中他們避免使用jQuery：

li.nav-level-2-item 
{ 
    display: inline-block; 
    *display: inline; *zoom: 1; /* IE 6-7 hack */ 
    vertical-align: middle; 
}

或者另一種可能解決方案：

li.nav-level-2-item 
{ 
    display: table; 
} 

li.nav-level-2-item a 
{ 
    display: table-cell; 
    vertical-align: middle; 
}

有關更多的只是CSS的解決方案，請http://phrogz.net/css/vertical-align和http://www.vanseodesign.com/css/vertical-centering。

來源

2013-09-26 20:31:56

你是絕對正確的，我通過直接尋找jQuery解決方案來完成複雜事務。有可能用純CSS實現......謝謝 – ecolema

讓您的跨度block-level元素會給它height：

<style> span.menu-item { display:block /* or inline-block */; } </style>

作爲替代方案，你可以改變的跨度成爲本地之一。

來源

2013-09-26 20:23:12 xandercoded

我應該在代碼中包含css，但是謝謝您指出這一點。 – ecolema

我不確定目標是什麼，但我確實有一個答案，爲什麼警報總是一樣的。您使用.each()迭代li元素，但是在每次迭代中，您沒有引用當前項目，因此您始終會檢索第一個匹配元素的高度。試試這個：

http://jsfiddle.net/5uwuQ/

$(document).ready(function() { 

    var navItem = $('li.nav-level-2-item'); 

    navItem.each(function() { 
     var containerHeight = $(this).height(); 
     var spanHeight = $('span.menu-item', this).height(); 
     console.log(spanHeight) 
    }); 
});

的菜單項垂直居中可能將是通過設置line-height容易。

來源

2013-09-26 20:25:26

謝謝，是的，這是js中的錯誤 – ecolema

使用jquery獲取跨度的高度

回答

相關問題