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，它将仅包含未隐藏的/ s项。然后您可以获取该元素的数据步长值。

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>

Answer 2

我只是在小提琴上做了一些草图，尝试一下，让我知道您是否需要先生。这是一个纯JavaScript解决方案。

let nodeList = document.getElementById("wathever").querySelectorAll(".step");
nodeList.forEach(function(div){
   if(div.style.display!="none"){
      //do something
      let dataStep = div.dataset.step;
      console.log(dataStep);
   }
});

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

从不显示样式的地方获取属性值

2 个答案: