Take attribute value from where style display is not none
up vote
1
down vote
favorite
I have few divs:
<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>
I would like to get the value of attribute "data-step"
where style: display
is not none
.
Is it possible with JavaScript or JQuery?
javascript jquery
add a comment |
up vote
1
down vote
favorite
I have few divs:
<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>
I would like to get the value of attribute "data-step"
where style: display
is not none
.
Is it possible with JavaScript or JQuery?
javascript jquery
3
Well, since JQuery is JavaScript, there's nothing that one can do that the other can't and, of course, this is possible. The question really is, what have you tried? Have you read about how to query for elements based on their attributes? Have you read aboutdata-*
attributes and how to access them via the DOM?
– Scott Marcus
Nov 7 at 18:06
1
Well, I am ashamed, because first I wrote question, then I think. It can by done by $(".step[display!='none']").attr("data-step")
– goskan
Nov 7 at 18:10
1
$('.step:visible').attr('data-step');
– Adam Łożyński
Nov 7 at 18:12
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have few divs:
<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>
I would like to get the value of attribute "data-step"
where style: display
is not none
.
Is it possible with JavaScript or JQuery?
javascript jquery
I have few divs:
<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>
I would like to get the value of attribute "data-step"
where style: display
is not none
.
Is it possible with JavaScript or JQuery?
javascript jquery
javascript jquery
edited Nov 7 at 18:09
Scott Marcus
38k51936
38k51936
asked Nov 7 at 18:04
goskan
277
277
3
Well, since JQuery is JavaScript, there's nothing that one can do that the other can't and, of course, this is possible. The question really is, what have you tried? Have you read about how to query for elements based on their attributes? Have you read aboutdata-*
attributes and how to access them via the DOM?
– Scott Marcus
Nov 7 at 18:06
1
Well, I am ashamed, because first I wrote question, then I think. It can by done by $(".step[display!='none']").attr("data-step")
– goskan
Nov 7 at 18:10
1
$('.step:visible').attr('data-step');
– Adam Łożyński
Nov 7 at 18:12
add a comment |
3
Well, since JQuery is JavaScript, there's nothing that one can do that the other can't and, of course, this is possible. The question really is, what have you tried? Have you read about how to query for elements based on their attributes? Have you read aboutdata-*
attributes and how to access them via the DOM?
– Scott Marcus
Nov 7 at 18:06
1
Well, I am ashamed, because first I wrote question, then I think. It can by done by $(".step[display!='none']").attr("data-step")
– goskan
Nov 7 at 18:10
1
$('.step:visible').attr('data-step');
– Adam Łożyński
Nov 7 at 18:12
3
3
Well, since JQuery is JavaScript, there's nothing that one can do that the other can't and, of course, this is possible. The question really is, what have you tried? Have you read about how to query for elements based on their attributes? Have you read about
data-*
attributes and how to access them via the DOM?– Scott Marcus
Nov 7 at 18:06
Well, since JQuery is JavaScript, there's nothing that one can do that the other can't and, of course, this is possible. The question really is, what have you tried? Have you read about how to query for elements based on their attributes? Have you read about
data-*
attributes and how to access them via the DOM?– Scott Marcus
Nov 7 at 18:06
1
1
Well, I am ashamed, because first I wrote question, then I think. It can by done by $(".step[display!='none']").attr("data-step")
– goskan
Nov 7 at 18:10
Well, I am ashamed, because first I wrote question, then I think. It can by done by $(".step[display!='none']").attr("data-step")
– goskan
Nov 7 at 18:10
1
1
$('.step:visible').attr('data-step');
– Adam Łożyński
Nov 7 at 18:12
$('.step:visible').attr('data-step');
– Adam Łożyński
Nov 7 at 18:12
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
You can use the :visible selector in jQuery. This will create a node list (like the querySelectorAll that will contain only the item /s that is not hidden. Then you can get the data-step value of that element.
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>
add a comment |
up vote
0
down vote
I just did some sketch on fiddle, try it and let me know if is what you need sir. This is a pure javascript solution.
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>
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You can use the :visible selector in jQuery. This will create a node list (like the querySelectorAll that will contain only the item /s that is not hidden. Then you can get the data-step value of that element.
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>
add a comment |
up vote
1
down vote
accepted
You can use the :visible selector in jQuery. This will create a node list (like the querySelectorAll that will contain only the item /s that is not hidden. Then you can get the data-step value of that element.
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>
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You can use the :visible selector in jQuery. This will create a node list (like the querySelectorAll that will contain only the item /s that is not hidden. Then you can get the data-step value of that element.
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>
You can use the :visible selector in jQuery. This will create a node list (like the querySelectorAll that will contain only the item /s that is not hidden. Then you can get the data-step value of that element.
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>
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>
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>
answered Nov 7 at 20:39
gavgrif
8,0702717
8,0702717
add a comment |
add a comment |
up vote
0
down vote
I just did some sketch on fiddle, try it and let me know if is what you need sir. This is a pure javascript solution.
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>
add a comment |
up vote
0
down vote
I just did some sketch on fiddle, try it and let me know if is what you need sir. This is a pure javascript solution.
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>
add a comment |
up vote
0
down vote
up vote
0
down vote
I just did some sketch on fiddle, try it and let me know if is what you need sir. This is a pure javascript solution.
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>
I just did some sketch on fiddle, try it and let me know if is what you need sir. This is a pure javascript solution.
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>
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>
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>
answered Nov 7 at 18:21
William
407
407
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53195236%2ftake-attribute-value-from-where-style-display-is-not-none%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Well, since JQuery is JavaScript, there's nothing that one can do that the other can't and, of course, this is possible. The question really is, what have you tried? Have you read about how to query for elements based on their attributes? Have you read about
data-*
attributes and how to access them via the DOM?– Scott Marcus
Nov 7 at 18:06
1
Well, I am ashamed, because first I wrote question, then I think. It can by done by $(".step[display!='none']").attr("data-step")
– goskan
Nov 7 at 18:10
1
$('.step:visible').attr('data-step');
– Adam Łożyński
Nov 7 at 18:12