select a div with a certain data attribute without each loop

Question

<div class='bwrap' data-x='home01'></div>
<div class='bwrap hidden' data-x='home02'></div>
<div class='bwrap hidden' data-x='home03'></div>
<div class='bwrap hidden' data-x='home04'></div>

I want to show .bwrap with data-x='home04' without each loop.
According to this I tried:

js

var obj = $('.bwrap[data-x="home04"]');
obj.show();

Nothing happens.

How are you hiding the element and are you running that jQuery on document ready because your code works fine - https://jsfiddle.net/eyack83r/ — Pete, Jun 05 '17 at 08:18
also show() won't remove hidden class. show()/hide() changes display style of the element — Jurij Jazdanov, Jun 05 '17 at 08:18

Alive to die - Anant · Accepted Answer · 2017-06-05T08:30:01.797

Your code worked fine if:-

1.jQuery library added before your script code.

2.code is wrapped inside $(document).ready(function(){...});

3.Since div have no text that's why you may confuse that it's not shown. Add some text to that div and check.

Working example:-

$(document).ready(function(){
  var obj = $('.bwrap[data-x="home04"]');
  obj.show();
  //can change in one-liner like :- $('.bwrap[data-x="home04"]').show();
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jQuery library needed-->
<div class='bwrap' data-x='home01'>01</div><!-- added text to show that your code worked-->
<div class='bwrap hidden' data-x='home02'>02</div><!-- added text to show that your code worked-->
<div class='bwrap hidden' data-x='home03'>03</div><!-- added text to show that your code worked-->
<div class='bwrap hidden' data-x='home04'>04</div><!-- added text to show that your code worked-->

score 0 · Answer 2 · answered Jun 05 '17 at 08:28

0

Just to show (means remove hidden class)

You can do just following

$('.bwrap[data-x="home04"]').show();

answered Jun 05 '17 at 08:28

Zico

2,349
2
22
25

select a div with a certain data attribute without each loop

2 Answers2