Получить ширину и высоту img и добавить его к ближайшему родителю с помощью JavaScript - PullRequest
Новая
       22

Получить ширину и высоту img и добавить его к ближайшему родителю с помощью JavaScript

1 голос
/ 21 января 2012

Я выяснил, как получить ширину и высоту изображения с помощью JavaScript. Мой вопрос заключается в том, как применить ширину и высоту к ближайшему родителю, в этом случае это li с использованием JavaScript. 

<ul>
    <li> <img src="img1.jpg" /> </li>
    <li> <img src="img2.jpg" /> </li>
</ul>

JS я использую: 

$(window).load(function() {
    var pic = $('img');
    var w = pic.width();
    var h = pic.height();

    pic.removeAttr("width"); 
    pic.removeAttr("height");

    $('ul li').css('width',w);
});

Прямо сейчас он только получает ширину и высоту первого изображения и применяет его к каждому ли.

Ответы [ 5 ]

1 голос
/ 21 января 2012

Еще один способ: 

pic.closest("li").css({'width' : w , 'height' : h});
1 голос
/ 21 января 2012

Решение, приведенное ниже, было изменено для демонстрации его эффективности:

CSS: 

li {
  border: 1px solid #000; 
  width: 80px;
  height: 100px;
}

HTML: 

<ul>
    <li id="one"> <img src="img1.jpg" width="50" height="80" /> </li>
    <li id="two"> <img src="img2.jpg" width="70" height="50" /> </li>
</ul>
<input type="button" value="Change" id="change">

jQuery: 

$('#change').click(function(){
    $('img').each(function(){
        e = $(this);
        dim = [e.width(),e.height()];
        e.parent().css({width: dim[0], height: dim[1]});
    });
});

Пример: http://jsfiddle.net/kfnhh/

Просто удалите обработчик события щелчка, и код должен быть легко реализован в вашей среде.

1 голос
/ 21 января 2012

Попробуйте что-то вроде: 

$('img').each(function () {

    var pic = $(this) ;
    var w = pic.width();
    var h = pic.height();

    pic.removeAttr("width"); 
    pic.removeAttr("height");

    pic.parent().css('width',w)
})

Не пробовал, но идея есть.

0 голосов
/ 05 июня 2013

Чтобы изменить как можно меньше: 

$(window).load(function() {
    $('img').each(function() {
        var pic = $(this);
        var w = pic.width();
        var h = pic.height();

        pic.removeAttr("width"); 
        pic.removeAttr("height");

        pic.parents('li').css('width',w);
    });
});

Будет ли это работать?

0 голосов
/ 21 января 2012

.parent () даст вам родителя того, над чем вы его используетеВ вашем случае следующее должно обеспечить вам родительский контроль над вашим изображением.

...