CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6330

Targeting an element with specific data attribute value

I am working on the code below. How can I add .click() to the a link with specific data attribute of HD?

if ($(a).data("quality") == "HD") {
  $(this).click();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
  <li><a data-quality="L">Low</a></li>
  <li><a data-quality="M">Med</a></li>
  <li><a data-quality="HD">HD</a></li>
</ul>

Upvotes: 0

Views: 49

Answers (4)

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

pure js approach

window.onload = clickAnchor();

function clickAnchor() {
let anchorTags = document.getElementsByTagName('a');
for(i=0;i<anchorTags.length;i++) {
if(anchorTags[i].getAttribute('data-quality') == 'HD') {
     anchorTags[i].click();;
  }
}
}
<ul class="stream">
  <li><a onclick = "alert('low clicked')" data-quality="L">Low</a></li>
  <li><a onclick = "alert('med clicked')" data-quality="M">Med</a></li>
  <li><a onclick = "alert('HD clicked')" data-quality="HD">HD</a></li>
</ul>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68413

You can directly bind the click to the anchor with data-quality attribute

Demo

$("a[data-quality='HD']").click( function(){
  console.log($(this).text()) 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
  <li><a data-quality="L">Low</a></li>
  <li><a data-quality="M">Med</a></li>
  <li><a data-quality="HD">HD</a></li>
</ul>

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

you can make use of Attribute Selectors:

$('a[data-quality="HD"]').click(function() {
    //do something
});

Upvotes: 1

Barmar
Barmar

Reputation: 781974

Use an Attribute Selector

$("a[data-quality=HD]").click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
  <li><a data-quality="L">Low</a></li>
  <li><a data-quality="M">Med</a></li>
  <li><a data-quality="HD">HD</a></li>
</ul>

Upvotes: 2

Related Questions