Develop Reference

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>

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>

you can make use of Attribute Selectors:
$('a[data-quality="HD"]').click(function() {
//do something
});

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>

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>

jquery click event on bootstrap 3 tabs

I have this code:
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I want to capture the any tab click event and alert the id of the tab being activated by the click. How is this done?

$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>

I would use the bootstrap events API instead of adding additional click handlers
$('.yourTabsClass a').on('show.bs.tab', function(e){
alert('ID clicked = ' + e.target.id)
});
Reference: bootstrap tabs docs
DEMO

$("a[data-toggle='tab']").click(function() {
alert($(this).attr("id"))
});
Here is jsfiddle

Replace a URL on load using only class or url reference

I have some javascript that will find the current URL and set as li to class active. What I then need it to do so that the accordion menu will function correctly is to replace the URL in the associated a href with "#".
ie.
<li><a id="Create" href="../Create/Create.html"> Create</a>
needs to be changed to:
<li><a id="Create" href="#"> Create</a>
Here is my html:
<ul class="topnav">
<li class="">
<a id="Dashboard" href="../dashboard/dashboard.html"> Dashboard</a>
</li>
<li><a id="Create" href="../Create/Create.html"> Create</a>
<ul>
<li><a id="Monster" href="../Monster/Monster.html"> Monster</a>
<ul>
<li><a id="Custom" href="../Custom/Custom.html"> Custom</a>
<ul>
<li><a id="New" href="../New/New.html"> New</a></li>
<li><a id="Drafts" href="../Drafts/Drafts.html">> Drafts</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And current Javascript that will give the current page a class of "active" on the corresponding "li" tag.
var url = window.location;
$('ul.topnav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
This would be easily achieved utilizing the ID:
document.getElementById("Create").href="#";
but this is not an option due to the magnitude of the site. It needs to be done via javascript.
I've tried to do this with
document.getElementByClassName('li.active a').href="#";
but that is not working. I'm also concerned this might strip out all hrefs under that li.
Any help would be greatly appreciate!

How to create multiple ajax calls in jQuery in more efficient and useful way

I have these 3 links in my code:
<ul>
<li><a id="link1" href="#">link 1</a></li>
<li><a id="link2" href="#">link 2</a></li>
<li><a id="link3" href="#">link 3</a></li>
</ul>
This is how I write the ajax request for each link (as you can see the same code is multiple 3 times for each link - and I want to know how to avoid that)
$(document).ready(function () {
$("a#link1").click(function() {
$.get("anothertest.php?q=1", function(data){
$("#phpTestAlon").html(data);
});
});
$("a#link2").click(function() {
$.get("anothertest.php?q=2", function(data){
$("#phpTestAlon").html(data);
});
});
});
$("a#link3").click(function() {
$.get("anothertest.php?q=3", function(data){
$("#phpTestAlon").html(data);
});
});
});
What is the way to create this code but without the multiple duplications to make it more efficient? Is there a way to write it like this?:
$.get("anothertest.php?q=" + theIDofTheElement, function(data){
thanks,
Alon

Add a data-id attribute to your link and use one piece of JS:
<ul>
<li><a id="link1" href="#" data-id="1">link 1</a></li>
<li><a id="link2" href="#" data-id="2">link 2</a></li>
<li><a id="link3" href="#" data-id="3">link 3</a></li>
</ul>
$("ul li a").click(function() {
var idToSend = $(this).data('id');
$.get("anothertest.php?q=" + idToSend, function(data){
$("#phpTestAlon").html(data);
});
});
This example uses data-id, but you could use any attribute you wanted, including id="". Another sensible option would be rel="".
Notice the selector has changed to ul li a so as to capture all <a> clicks in one event.

var theIDofTheElement = $(this).attr('id').match(/\d$/)[0];

You can do
$("ul li a").click(function() {
e.preventDefault()
$.get(this.href, function(data){
$("#phpTestAlon").html(data);
});
});
With this HTML:
<ul>
<li><a id="link1" href="anothertest.php?q=1">link 1</a></li>
<li><a id="link2" href="anothertest.php?q=2">link 2</a></li>
<li><a id="link3" href="anothertest.php?q=3">link 3</a></li>
</ul>
It is important that this solution also works if javascript is disabled. return false will make sure if js is enabled to not actually go to a different page. But if js was disabled, then the user would just go to whatever linked they clicked on.

How to add <li> using javascript?

I want to add one more li at last but using JavaScript/jQuery
for example i want to add this li at last <li><a href="#header" >Back to top</a></li>
<ul id="nav">
<li><a href="#nowhere" >Lorem</a></li>
<li><a href="#nowhere" >Aliquam</a></li>
<li><a href="#nowhere" >Morbi</a></li>
<li><a href="#nowhere" >Praesent</a></li>
<li><a href="#nowhere" >Pellentesque</a></li>
Here i want to add one more li using javascript
</ul>

$(document).ready( function(){
$('ul#nav').append('<li>Back to top</li>');
}

Use the append function.
$("#nav").append('<li>Back to top</li>');