javascript - 从样式显示不为 none 的地方获取属性值

Question

我有几个 div:

<div clas="modal-body step step-1" data-step="1" style="display: block;"></div>
<div clas="modal-body step step-2" data-step="2" style="display: none;"></div>
<div clas="modal-body step step-3" data-step="3" style="display: none;"></div>

我想获取属性“data-step”的值，其中style:display不是none。

可以使用 JavaScript 或 JQuery 实现吗？

Answer 1

您可以在 jQuery 中使用 :visible 选择器。这将创建一个节点列表(如 querySelectorAll ，它将仅包含未隐藏的项目。然后您可以获得该元素的数据步值。

let visibleStep =$(".step:visible");
console.log(visibleStep.attr('data-step')); // gives  1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wathever">
  <div class="modal-body step step-1" data-step="1" style="display: block;">A</div>
  <div class="modal-body step step-2" data-step="2" style="display: none;">B</div>
  <div class="modal-body step step-3" data-step="3" style="display: none;">C</div>
</div>