親からimgディメンションを設定するJquery

Question

私はナビをやっています。

そのulリスト。 'a'タグと 'span'は同じ空間にあり、スパンには隠された画像が含まれています。 イメージは成功したfadeIn/fadeOutです。 im（img/span）の幅をli（親）の幅に設定しようとしています

私は気にしないようです。助けてください。

<ul id="nav"> 
    <li><a href="#">Web<br />Design</a><span><img src="images/nav-over.png" height="100px" /></span></li> 
    <li><a href="#">Graphic<br />Design</a><span><img src="images/nav-over.png" height="100px" /></span></li> 
    <li><a href="#">Our<br />Work</a><span><img src="images/nav-over.png" height="100px" /></span></li> 
    <li><a href="#">SEO</a><span><img src="images/nav-over.png" height="100px" /></span></li> 
</ul> 

...これは...正しい道の上にちょっと

var h = $('#nav li img').parent().height(); 
var w = $('#nav li img').parent().width(); 
$('#nav li img').width(w).height(h); 

だったが、それは#nav李スパン高さのすべてを設定し、親から同じではなく幅私が知っている

$('#nav li span').each(function(){$(this).parent().width()}); 
$('#nav li span img').each(function(){$(this).parent().width()}); 

が悪い構造化ですが、私はちょうどテストしていた：

は、私はこれを試してみました。しかしそれはうまくいきませんでした...

各＃nav li spanと#nav li imgについては、対応する親（li）幅に幅を設定したいと思います。

私はこれを正しく説明したと思います。笑。ありがとう。

HERESにCSS

#nav { 
    list-style:none; width:608px; height:100px; display:block; padding:0; margin:0; position:relative 
} 
#nav li { 
    background:url(images/nav-div.jpg) right top no-repeat; float:left; text-align:center;height:100px; 
} 
#nav li a { 
    color:#565555; font-size: 18px; letter-spacing:10px; line-height:25px; text-transform:uppercase; text-decoration:none;height:100px; display:block; padding:0 19px 0 19px; position:relative; top:0; left:0;z-index:900 
} 
#nav li a:hover { 
    color:#eaeaea 
} 

#nav li span { 
    position:relative; top:-100px; left:0; z-index:800; opacity:0.0; 
} 

Answer 1

あなたは.each()を持って使用.width()、および.parent()の代わりに.closest("li")を使用し、return文を忘れないでください：

$('#nav li span img').width(function() { return $(this).closest("li").width(); }); 
$('#nav li span img').height(function() { return $(this).closest("li").height(); }); 

http://jsfiddle.net/KzhgQ/

を編集：ここでは二回の画像をループ防止、より効率的なバージョン（感謝natedavisolds）です：

$('#nav li span img').each(function() { 
    var img = $(this); 
    var listItem = img.closest("li"); 
    img.width(listItem.width()).height(listItem.height()); 
}); 

http://jsfiddle.net/KzhgQ/1/

Answer 2

は狂気私を呼び出しますが、/あなたは、CSSでこれをやってはならないことができませんでした？：

#nav li img { 
    width: 100%; 
} 

Answer 3

CSSが正しく設定されていると仮定します。ブロック要素）。

$('#nav li').each(function() { 
    var $li = $(this); 

    $li.find('span, span img').css({ width: $li.width(), height: $li.height()}); 
}); 

は動作しますが、テストされていません。