Jquery для установки размеров img от родителя - PullRequest
Новая
       0

Jquery для установки размеров img от родителя

0 голосов
/ 16 ноября 2011

Я делаю навигацию.

Это список ul. теги 'a' и 'span' находятся в одном и том же месте, а span содержит скрытое изображение. Изображение делает fadeIn / fadeOut, что успешно. Я пытаюсь установить ширину 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 li span одинаково, а не из родительского ...

тогда я попробовал это: 

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

, который, я знаю, плохо структурирован, но я только тестировал. но нет, это не сработало ...

поэтому для каждого #nav li span и #nav li img я хочу установить ширину соответствующей ширине родительского (li).

Я думаю, что объяснил это правильно. лол. спасибо.

вот ксс 

 #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;
}

Ответы [ 3 ]

1 голос
/ 16 ноября 2011

Назовите меня сумасшедшим, но не могли / не должны ли вы делать это с помощью CSS?: 

#nav li img {
    width: 100%;
}
1 голос
/ 16 ноября 2011

Предполагается, что CSS настроен правильно (т. Е. Элементы блока). 

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

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

должно работать, но не проверено.

1 голос
/ 16 ноября 2011

Используйте .width() там, где у вас есть .each(), и используйте .closest("li") вместо .parent(), и не забудьте операторы 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/

...