Question

我在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>

我希望使用jQuery获取<li> style="display: list-item;" myphoto.png（var firstThumbnailDisplay = $('#thumbs_list_frame li').css('display') == 'list-item'; var img = firstThumbnailDisplay.find("img").first().attr('src');）的图片来源，但我不知道该怎么办... < / p>

我试过了：

{{1}}

但它不起作用。

Answer 1

使用:visible选择器。

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

Answer 2

这应该有效：

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

它找到第一个可见的（样式未设置为display: none;）li并获取其中图像的src属性。

Answer 3

使用:visible查找显示的内容，然后使用.find()和.attr()来实现您的目标。

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

Here's a fiddle

Answer 4

//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;

在jQuery中使用样式选择列表中的图像源

4 个答案:

Fiddle