從不顯示樣式的地方獲取屬性值

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>

我想要獲得style: display不是none的屬性"data-step"的值。

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>