Javascript 如何按类获取可见元素？

除了javascript，我别无选择。我相信很多人都经历过这一切

HTML代码

<ul class="recordingslist"></ul>
..
..
..
<div class='test' style="display : none">
  <ul class="recordingslist test1" ></ul>
</div>
..
..
..
<div class="testasdasdsad" style="display : none">
<ul class="recordingslist test2"></ul>
</div>

我在同一个班上有很多ul。现在只有第一个ul是可见的，我想在那个可见的ul后面加上“test”。我们如何才能做到这一点

---

提前非常感谢。

使用jquery可以轻松实现这一点。建议在ul div中添加一个附加属性，以标记div是否可见。像下面这样

HTML

---

根据您在注释中的说明，您正在搜索第一个

元素，该元素的父元素

具有不等于

无的
显示属性

鉴于此，我建议：

// here we use Array.from() to convert the supplied Array-like
// NodeList into an Array, in order to use Array methods:
Array.from(

    // here we find all <ul> elements with a class of
    // 'recordingslist':
    document.querySelectorAll('ul.recordingslist')

  // we filter the resulting Array of <ul> elements, using
  // Array.prototype.filter():
  ).filter(

    // using an Arrow function, in which the 'ul' variable
    // is a reference to the current <ul> element of the Array
    // of <ul> elements over which we're iterating:
    ul => window.getComputedStyle(
      // we find the computed CSS properties of the node:
      ul.parentNode, null

    // and access its 'display' property to ensure that
    // it's computed display property-value is not equal
    // to the value of 'none' (so it should not be hidden):
    ).display !== 'none'

  // we iterate over those elements retained in the Array,
  // using Array.prototype.forEach
  ).forEach(

    // here we use another Arrow function:
    // ul: the current <ul> in the Array of <ul> elements,
    // index: the index of the current <ul> in the Array
    // of <ul> elements.

    // here if the index is exactly equal to 0, we add the
    // 'test' class-name, otherwise we add an empty string:
    (ul, index) => ul.classList.add( index === 0 ? 'test' : '' )
  );

//这里我们使用Array.from（）来转换提供的数组，如
//将节点列表放入数组中，以便使用数组方法：
Array.from(
//在这里，我们发现所有
元素都具有一类
//“记录列表”：
document.querySelectorAll（'ul.RecordingList'）
//我们使用
//Array.prototype.filter（）：
).过滤器(
//使用箭头函数，其中“ul”变量
//是对阵列的当前
元素的引用
//我们正在迭代的
元素的数量：
ul=>window.getComputedStyle(
//我们可以找到节点的计算CSS属性：
ul.parentNode，null
//并访问其“显示”属性，以确保
//它的计算显示属性值不相等
//设置为“无”（因此不应隐藏）：
).display！=“无”
//我们迭代数组中保留的元素，
//使用Array.prototype.forEach
)弗雷奇先生(
//这里我们使用另一个箭头函数：
//ul:
元素数组中的电流
，
//索引：数组中当前
的索引
//
元素的。
//这里，如果索引正好等于0，我们添加
//“test”类名，否则我们将添加一个空字符串：
（ul，index）=>ul.classList.add（index==0？'test'：''）
);

参考资料：








使用jquery选择器
：visible
例如，在您的情况下，如果您只想选择ul visibles：

$（'ul:visible'）。追加（'test'）

或者使用这个类

$（'.RecordingList:visible'）。追加（'test'）

正式文档：
首先需要定义“可见”。滚动到屏幕上了吗？是否显示除无以外的其他内容？具有可见性而不是隐藏？如果不透明度不是0，那么一次只显示一个可见元素？@Swapper-“如何获取可见元素是我的问题”-对于要求您更具体地说明“可见”是什么意思的问题，这是一个无用的回答@Swapper-“我将一次显示一个问题”-这意味着什么？是否要切换其显示属性？他们的不透明性？它们的可见性属性？您只是要滚动到它们吗？请尝试提供一个选项，以便通过隐藏其父元素来隐藏
（将其
显示设置为
无
），从而隐藏
元素？因此，您需要一种方法，通过该方法可以找到第一个
，其父
的
显示未设置为
none
？匹配纯javascript。这是JQUERY现在怎么样？我不明白为什么否决票看起来是个不错的答案
<ul visible=false class="recordingslist"></ul>
<ul visible=false class="recordingslist test1"></ul>
<ul visible=true class="recordingslist test2"></ul>

let allElems = document.querySelectorAll('.recordingslist')
allElems.forEach((obj)=>{
    if(obj.getAttribute('visible')==='true'){
        obj.append('Hello there')
    }
})

// here we use Array.from() to convert the supplied Array-like
// NodeList into an Array, in order to use Array methods:
Array.from(

    // here we find all <ul> elements with a class of
    // 'recordingslist':
    document.querySelectorAll('ul.recordingslist')

  // we filter the resulting Array of <ul> elements, using
  // Array.prototype.filter():
  ).filter(

    // using an Arrow function, in which the 'ul' variable
    // is a reference to the current <ul> element of the Array
    // of <ul> elements over which we're iterating:
    ul => window.getComputedStyle(
      // we find the computed CSS properties of the node:
      ul.parentNode, null

    // and access its 'display' property to ensure that
    // it's computed display property-value is not equal
    // to the value of 'none' (so it should not be hidden):
    ).display !== 'none'

  // we iterate over those elements retained in the Array,
  // using Array.prototype.forEach
  ).forEach(

    // here we use another Arrow function:
    // ul: the current <ul> in the Array of <ul> elements,
    // index: the index of the current <ul> in the Array
    // of <ul> elements.

    // here if the index is exactly equal to 0, we add the
    // 'test' class-name, otherwise we add an empty string:
    (ul, index) => ul.classList.add( index === 0 ? 'test' : '' )
  );