Question

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

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

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

var bg = element.css('background-image'); // Returns url('http://www.google.com/imageurl')

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

Answer 1

您可以使用:visible选择器。像这样的$('.classname:visible')。

https://api.jquery.com/visible-selector/

Answer 2

这是我使用JQuery要做的事情：

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

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

Answer 3

$('selector:visible')将为您提供与给定选择器匹配的可见元素

.eq(n)将返回匹配的第n个节点

.css('backgroundImage')将为您提供背景图片

.match(/"(.+)"/)[1]将仅返回背景图片的网址：

var specialElement = $('.example:visible').eq(1);
specialElement.append(specialElement.css('backgroundImage').match(/"(.+)"/)[1]);

body {
  color: white;
}
.example {
  visibility: hidden;
}
.special {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
  <title>example</title>
</head>
<body>
  <header>
    <h1>Hello World</h1>
  </header>
  <main>
    <section>
      <article class="example" style="background-image:url('https://images.pexels.com/photos/374815/pexels-photo-374815.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');">
        <h2>Bananas</h2>
        <p>Bananas are a great source of potassium.</p>
      </article>
      <article class="example special" style="background-image:url('https://images.pexels.com/photos/707194/pexels-photo-707194.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');">
        <h2>Apples</h2>
        <p>An apple a day will keep the doctor away!</p>
      </article>
      <article class="example" style="background-image:url('https://images.pexels.com/photos/1667580/pexels-photo-1667580.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');">
        <h2>Oranges</h2>
        <p>Oranges make great juice.</p>
      </article>
    </section>
  </main>
</body>

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

3 个答案: