Выберите источник изображения в списке со стилем в jQuery

Question

Выберите источник изображения в списке со стилем в jQuery

0

У меня этот код в HTML:

<div id="thumbs_list">
    <ul id="thumbs_list_frame">
        <li id="thumbnail_260" style="display: none;">...</li>
        <li id="thumbnail_261" style="display: none;">...</li>
        <li id="thumbnail_262" style="display: none;">...</li>
        <li id="thumbnail_264" style="display: list-item;">
            <a href='mywebsite.com'>
                <img src="myphoto.png" alt="Photo"/>
            </a>
        </li>
        <li id="thumbnail_266" style="display: none;">...</li>          
    </ul>
</div>

Я ищу, чтобы получить источник изображения, который находится в <li> со style="display: list-item;" (myphoto.png) с jQuery, но я не знаю, как это сделать...

Я попробовал это:

var firstThumbnailDisplay = $('#thumbs_list_frame li').css('display') == 'list-item';
var img = firstThumbnailDisplay.find("img").first().attr('src');

Но это не сработает.

BnJ 15 апр. 2014, в 15:48

Источник

0

почему вы не добавляете «выбранный» класс к элементу li и выбираете с помощью $ ('. classname'), чтобы сделать его немного менее хакерским
thsorens 15 апр. 2014, в 13:42
0

@Fuzzyma получить источник изображения для точки списка, у которой есть style = "display: list-item;"
BnJ 15 апр. 2014, в 13:47
0

Все нижеприведенное тестирует видимое, видимое! == list-item
Liam 15 апр. 2014, в 13:54

Показать ещё 1 комментарий

Теги:

javascript

jquery

4 ответа

1

Используйте селектор :visible.

var firstThumbnailDisplay = $('#thumbs_list_frame li:visible')

denat 15 апр. 2014, в 12:26

1

Используйте :visible чтобы найти тот, который отображается, а затем с помощью .find() и .attr() для достижения вашей цели.

var src = $('.result').html($('#thumbs_list_frame li:visible').find('img').attr('src'));

Здесь скрипка

SauriolJf 15 апр. 2014, в 12:13

1

//declare an array (there could be multiple)
var listItems = [];
//Loop the items
$('#thumbs_list_frame li').each(function() {
   var $this = $(this);
   //check for value
   if ($this.css('display') === 'list-item') {
     //push item into array
     listItems.push($this);
   }
});

//listItems now contains all list items with display:list-item;

скрипка

Liam 15 апр. 2014, в 11:52

Ещё вопросы

почему вы не добавляете «выбранный» класс к элементу li и выбираете с помощью $ ('. classname'), чтобы сделать его немного менее хакерским
@Fuzzyma получить источник изображения для точки списка, у которой есть style = "display: list-item;"
Все нижеприведенное тестирует видимое, видимое! == list-item

ZiNNED · Accepted Answer · 2014-04-15T10-59-00.000Z

Это должно работать:

var src = $("#thumbs_list_frame li").filter(":visible:first").find("img").attr("src");

Он находит первый видимый (стиль не установлен для display: none;) li и получает атрибут src изображения внутри него.

Во-первых, в этом есть ряд фатальных недостатков :visible не проверяет list-item он проверяет, видим ли он. Это также вернется, когда display:block . Во-вторых, если видно более одного src == undefined .