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>
Related
I have this HTML:
var hash = window.location.hash; // got e.g: #tab-cultura
$(".nav-tabs").find(hash).parent().addClass("active");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
so for that I am trying this Jquery but seems not working:(
<ul class="nav nav-tabs">
<li class="tab-null"></li>
<li>Cidadania</li>
<li>Cultura</li>
<li>Educação</li>
<li><a href="#tab-bem-estar-e-ambiente" data-cat="bem-estar-ambiente" data-toggle="tab">Bem-estar
& Ambiente</a></li>
<li>Dinheiro</li>
<li><a href="#tab-ciencias-e-tecnologia" data-cat="ciencia" data-toggle="tab">Ciência
e Tecnologia</a></li>
</ul>
Now, on page reload I got this string #tab-cultura
now I want to add a class called active to li element which has a tag with attribute href="#tab-cultura"
Just use an attribute selector [href=#tab-cultura]:
var hash = "#tab-cultura";
$(".nav-tabs [href="+hash+"]").parent().addClass("active");
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="tab-null"></li>
<li>Cidadania</li>
<li>Cultura</li>
<li>Educação</li>
<li><a href="#tab-bem-estar-e-ambiente" data-cat="bem-estar-ambiente" data-toggle="tab">Bem-estar
& Ambiente</a></li>
<li>Dinheiro</li>
<li><a href="#tab-ciencias-e-tecnologia" data-cat="ciencia" data-toggle="tab">Ciência
e Tecnologia</a></li>
</ul>
by using your way of selectors,
var hash = window.location.hash; // got e.g: #tab-cultura
$(".nav-tabs").find("[href='"+hash+"']").parent().addClass("active");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
so for that I am trying this Jquery but seems not working:(
<ul class="nav nav-tabs">
<li class="tab-null"></li>
<li>Cidadania</li>
<li>Cultura</li>
<li>Educação</li>
<li><a href="#tab-bem-estar-e-ambiente" data-cat="bem-estar-ambiente" data-toggle="tab">Bem-estar
& Ambiente</a></li>
<li>Dinheiro</li>
<li><a href="#tab-ciencias-e-tecnologia" data-cat="ciencia" data-toggle="tab">Ciência
e Tecnologia</a></li>
</ul>
Check # query string From URL
var hash = window.location.hash;
Add active class in targeted li
$(".nav-tabs [href="+hash+"]").parent().addClass("active").siblings().removeClass("active");
$(".nav-tabs [href='#tab-cultura'").parent().addClass('active')
I am hiding 'hidden-items' class li elements using jquery and want to show them once more tag link is clicked. The jquery part is working, but all the list items are being showed.
I searched about this and found out about 'this' selector. But I am confused on how to use this to show items that are close to more tags link.
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/economic' class='gk-tag'>Economic</a></li>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery('.hidden-items').show();
});
});
</script>
Based on the structure of your HTML, you can use .prev() and .find() with this like:
jQuery(this).prev('.gk-tags').find('.hidden-items').show();
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery(this).prev('.gk-tags').find('.hidden-items').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/economic' class='gk-tag'>Economic</a></li>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
just use $(this) for the selection of the current clicked element.
then use .parents('.classNameOfParent') to get the parent element
then hide the parent element
.hide()
you could do this like that:
$(this).parents('.classNameOfParent').hide()
good luck!
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery(this).closest(".tag-box").find('.hidden-items').show();
});
});
Hope it helps. Thanks.
You can do it like this
jQuery(this).siblings('.gk-tags').find('.hidden-items').show();
I have
<ul>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Test</a></li>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Test fdgfdgfdgfdgfdgfdgfdgfdg fdg</a></li>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Plan</a></li>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">Test</a></li>
</ul>
code and wants to add class name to a tag parrent tag li i.e. class="selected" bu sing jquery.
I used this jquery code
function setSelectedTestPlan() {
jQuery("#tree ul li").each(function () {
jQuery(this).removeClass("selected");
});
jQuery(this).closest('li').addClass("selected");
}
But this line jQuery(this).closest('li').addClass("selected"); doesn't work...
Please help me out...
HTML
<li><a onclick="setSelectedTestPlan(this);" href="javascript:void(0);">New Test</a></li>
js
function setSelectedTestPlan(el) {
jQuery("#tree ul li").removeClass("selected");
jQuery(el).closest('li').addClass("selected");
}
or
js
function setSelectedTestPlan(el) {
jQuery(el).closest('li').addClass("selected").siblings().removeClass("selected");
}
You need to send the element through the function like this
HTML
onclick="setSelectedTestPlan(this);"
js
function setSelectedTestPlan(ele) {
jQuery("#tree ul li").each(function () {
jQuery(this).removeClass("selected");
});
jQuery(ele).closest('li').addClass("selected");
}
One line:
jQuery(this).closest('li').addClass("selected").siblings().removeClass("selected");
but you will have to amend your event to pass through 'this';
onclick="setSelectedTestPlan(this);"
function setSelectedTestPlan(e) {
jQuery("#tree ul li").each(function () {
jQuery(this).removeClass("selected");
});
jQuery(e).closest('li').addClass("selected");
}
<li><a onclick="setSelectedTestPlan(this);" href="javascript:void(0);">New Test</a></li>
alternative
<ul>
<li><a class="mylink" href="javascript:void(0);">New Test</a></li>
<li><a class="mylink" href="javascript:void(0);">New Test fdgfdgfdgfdgfdgfdgfdgfdg fdg</a></li>
<li><a class="mylink" href="javascript:void(0);">New Plan</a></li>
<li><a class="mylink" href="javascript:void(0);">Test</a></li>
</ul
$(function(){
$(".mylink").click(function(e){
$(".mylink").parents("li").removeClass("selected");
$(this).parents("li").addClass("selected");
e.preventDefault();
});
});
HTML
<li><a onclick="setSelectedTestPlan.call(this, event);" href="javascript:void(0);">New Test</a></li>
JS
function setSelectedTestPlan(e) {
jQuery(this)closest('li').addClass("selected").siblings().removeClass("selected");
}
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.
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>');