Если элемент виден, сделайте что-нибудь с другим элементом.Jquery - PullRequest
Новая
       28

Если элемент виден, сделайте что-нибудь с другим элементом.Jquery

2 голосов
/ 04 марта 2011

У меня есть несколько таких контейнеров 

<div class="container">
    <span>
     <!-- Inside the span is either text or img -->
    </span>
</div>

Цель состоит в том, чтобы иметь рамку вокруг ".container span", только если он содержит и изображение.

Я пробовал что-то подобное ... ноэто не работает 

if( $(this).find('.container span img').is(":visible") ){ $(".container span").css({'border':'10px'}); }

Ответы [ 4 ]

3 голосов
/ 04 марта 2011

visible - псевдо-селектор, поэтому 

.is(':visible')

Вы также можете использовать его так 

$(this).find('.container span img:visible')

EDIT

Эй, подождите, вы говорите, что он может не содержать изображение вообще? В этом случае вы не хотите проверять видимость, а скорее что-то вроде 

$(this).find('.container span img').length > 0

(конечно, если могут быть изображениями, а они могут быть скрытыми, вы хотите проверить длину img:visible)

РЕДАКТИРОВАТЬ 2

Теперь у вас есть рабочая проверка того, есть ли видимое изображение. Остальное зависит от вашей реализации. Используя $(this), я предполагал, что в нем будет какой-то узел DOM для поиска, который будет иметь только один .container для каждого значения this.

Если это не так - если вы хотите просмотреть все DOM за один раз - вы можете сделать что-то вроде этого: 

$('.container span img:visible').each(function() {
    $(this).closest('span').css('border', '10px');
});

Выше вы говорите, что "для всех видимых изображений внутри пролета внутри .container добавьте границу к их родительским промежуткам.

Другой способ сделать это будет примерно так: 

$('.container span').filter(function() { return $(this).find('img:visible').length > 0; }).css('border', '10px');
1 голос
/ 04 марта 2011

У вас две проблемы. Во-первых, ваш CSS неверен. Вы говорите ему, чтобы дать 10px границу ничего. Вам необходимо указать, какой вид границы и, возможно, цвет.

Во-вторых, .is("visible") должно быть .is(":visible")

Проверьте рабочий код на jsfiddle.net

(Мне пришлось удалить селектор this, но вы можете изменить свой существующий код в соответствии с приведенным выше.)

0 голосов
/ 04 марта 2011

Есть ли причина, по которой у вас есть span.Вы можете применить границу непосредственно к изображению без необходимости использования тега span, особенно если вы загружаете свои изображения динамически и ваши изображения имеют разные размеры.Затем вы должны убедиться, что размер вашего тега span изменен в соответствии с шириной и высотой изображения.Вы можете упростить задачу, избавившись от тега span, иначе, если все ваши изображения имеют одинаковые размеры, вам нужно указать ширину и высоту пролета.Также не забудьте указать свойства границы, такие как стиль и цвет. 

var $cont = $('.container span');
var $cont1 = $('.container span img');
$cont.each(function() {
    $cont.has('img').css({
        'width': $cont1.width(),
        'height': $cont1.height(),
        'border': '10px solid red'
    });
});

Проверьте рабочий пример на http://jsfiddle.net/GnXv4/6/

0 голосов
/ 04 марта 2011 
jQuery(function(){
    jQuery('.container').find('span').find('img').parents('span:first').css('boder','10px solid red');
});

http://jsfiddle.net/VMAJ7/1/

...