2011-09-23 125 views
1

我有這樣的HTML代碼設置圖像寬度跨越標籤

<ul> 
    <li><a href="#"><img src="path_to_image1"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image2"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image3"><span>some text</span></a></li> 
</ul> 

圖像不同的寬度。

我需要設置SPAN元素的寬度爲等於作爲IMG寬度。 下面是我寫的看在StackOverflow上板的代碼。

$(document).ready(function() { 
    $("ul li a").each(function() { 
     var theWidth = $(this).find("img").width(); 
     $("ul li a span").width(theWidth); 
    }); 
}); 

現在這段代碼只返回最後一幅圖像的寬度。 要改變什麼,所以我可以使用與img相同的span元素寬度?

由於

+0

澄清:你的'ul'具有特定的寬度,例如'100px'。你希望你的'li'始終具有相同的寬度?所以如果'img'是'40px',那麼跨度必須是'60px'? –

+0

請記住,CSS中的'width'參數不適用於'inline'元素。 'a'和'span'默認都是內聯的,因此它們不會聲明'width'屬性。如果這是可以接受的,你可以在實際的'li'上設置寬度。 –

+0

@Kalle H.Väravas:在這種情況下,跨度應該是40px – Johnatan

回答

0

答案是在自己的代碼,幾乎..

$(this).find("span").width(theWidth); 
+0

謝謝先生!它正在工作。 – Johnatan

4
$('ul li img').each(function() { 
    var imgWidth = $(this).width(); 
    $(this).next('span').css({'width': imgWidth}); 
}); 
0

替換此線

$("ul li a span").width(theWidth); 

$(this).find('span').width(theWidth); 

說明:$("ul li a span").width(theWidth);設置了所有三個元件span的寬度的行。
的「各自」循環運行3次。
第一一次將所有三個跨距到第一圖像的寬度。
時間它將所有三個跨度設置爲第二個圖像的寬度。
...

+0

感謝您的解釋,我現在明白了。 – Johnatan

1

你只需要更正一行:

$(this).find('span').width(theWidth); 

$("ul li a span").width(theWidth); 

與更換

0

你能只設置<li>的的寬度相同的寬度作爲圖像,並設置作爲<span>display: block;

這些跨度將和它們的包含(<li>)一樣寬,並且它可以爲您節省一點額外的jquery,試圖挖掘到跨度級別。

此外,爲了加快你的jQuery選擇器只需添加一個id到列表和目標,而不是試圖匹配ul li a...;現在你所要做的就是匹配#widths

<ul id="widths"> 
    <li><a href="#"><img src="path_to_image1"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image2"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image3"><span>some text</span></a></li> 
</ul> 

$(document).ready(function() { 
    $('#widths img').each(function() { 
     var imgWidth = $(this).width(); 
     $(this).next('span').css({'width': imgWidth}); 
    }); 
}); 
+0

是的。問題是圖像是絕對定位的,我不知道如何水平居中:)) – Johnatan

+0

我認爲居中絕對位置元素是一種使用'left:50%'和'margin-left:minus ;'...或類似的東西。 –

0

這種情況有解決的方法很多,這雖然爲我工作。

$(document).ready(function() { 
    $("ul li a img").each(function (index) { 
     $(this).next().width($(this).width()).css("display", "block"); 
    }); 
}); 
相關問題