How to show particular div using jQuery

Question

<div class="companyname" data-companyname="abc" ></div>
<div class="companyname" data-companyname="xyz" ></div>
<div class="companyname" data-companyname="pqr" ></div>

I need show only data-companyname="abc" div only....so i used following way in jQuery

$(".companyname").attr('abc').show();

How to get this?

Answer 1

$('div[data-companyname="abc"]').show()

.companyname {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="companyname" data-companyname="abc">1</div>
<div class="companyname" data-companyname="xyz">2</div>
<div class="companyname" data-companyname="pqr">3</div>

use the attr selector

Answer 2

You need to use attribute equals selector

Selects elements that have the specified attribute with a value exactly equal to a certain value

$(".companyname[data-companyname=abc]").show();

$(".companyname[data-companyname=abc]").show();

.companyname{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="companyname" data-companyname="abc" >abc</div>
<div class="companyname" data-companyname="xyz" >xyz</div>
<div class="companyname" data-companyname="pqr" >pqr</div>

Answer 3

Try this :Use attribute selector like below

$(".companyname[data-companyname='abc']").show();