Javascript 选择第一个具有类名称的可见元素

我试图选择第一个元素，该元素具有一个同样可见的特定类。我只想选择一个元素并将其存储为变量

var elements = document.getElementsByClassName('className'); // Get all visible elements with classname.
var element= elements[0]; // Return only the first element from this NodeList

对于我的特定用例，我试图检索它的背景图像，所以这就是我到目前为止得到的。我的变量返回“未定义”

---

我正在使用jQuery，但也欢迎使用纯JavaScript。无论什么都能最好地完成工作。

您可以使用

：visible

选择器。类似于这样的

$（'.classname:visible'）

---

以下是我使用JQuery的方法：

var element = $(".classname:visible:first");
var bg = element.css('background-image');

元素

包含指定类名的第一个可见元素。

$（'selector:visible'）

将获得与给定选择器匹配的可见元素

.eq（n）

将从匹配的节点返回第n个节点

.css（'backgroundImage'）

将为您提供背景图像

.match（/“（.+）”/）[1]

将只返回背景图像的URL：

var specialElement=$（'.example:visible'）.eq（1）；
specialElement.append（specialElement.css（'backgroundImage'）.match（/“（.+）”/）[1]）
正文{
颜色：白色；
}
.举例{
可见性：隐藏；
}
.特别的{
能见度：可见；
}

例子
你好，世界
香蕉
香蕉是钾的重要来源

苹果
一天一个苹果就能让医生远离你

橘子
橙子是很好的果汁

var元素
是一个普通的JS元素
.css
是jQuery元素的一种方法。您试图在非jQuery对象上使用jQuery方法。@Tyler Roper感谢您指出这一点！直到现在我才意识到这是一个问题。：）我收到错误“Uncaught DomeException:未能对‘Document’：’执行‘querySelector’。元素：visible’不是有效的选择器。”我相信错误在于
：visible
选择器，但我不确定我做错了什么：/@对不起，我老是犯错误。编辑了我的答案。它现在应该可以工作了，但我无法测试。没问题。：）我编辑了我的代码来匹配你的代码，我不再得到错误，所以我更接近了！但是，
var元素=$（“.classname:visible”）
返回
a.fn.init[选择器：“.classname:visible”，prevObject:n.fn.init（1），context:document]
，而
var元素=$（“.classname:visible”）.first（）
返回
a.fn.init[选择器：“”，prevObject:a.fn.init（0），上下文：document]
。一旦返回正确的元素，我相信背景代码会起作用。@Chopin23当你说它返回你所显示的内容时。变量“bg”等于什么？我相信你以前版本的代码对我有用。我的代码如下
var-element=$（“.classname:visible:first”）。检索背景图像url的第二行代码正在按预期工作。：）在技术上加载DOM之后，我的元素也在加载，因此我还需要在
$（窗口）中包装我的函数。在（“加载”上，function（）
，了解我的特定用例。感谢您的帮助！
var element = $(".classname:visible:first");
var bg = element.css('background-image');