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>');
Related
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 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>
<nav>
<ul>
<li><a id ="current" href="Default.aspx">A</a></li>
<li>B</li>
<li> C</li>
<li> D</li>
<li> E</li>
<li> F</li>
</ul>
</nav>
I have menu tab like this a link I want to change the id="current" to the tab im in. for example if user clicks and he is on page C the id=current must be in C.
Thanks all
Very crazy idea to change ID.
If it is not really needed (probably 100% of cases), I suggest to use another property to select current element. For example class, or even custom data- in html5.
Take a look here: http://www.w3schools.com/tags/att_global_data.asp
You're better off using a class for this, but this should do what you want:
<script>
$( "a" ).click(function() {
$('#current').attr('id',''); // clear old current
$( this ).attr('id', 'current'); // set new current
});
</script>
I can see you are using asp, so you can just use some logic to check the current url and assign id or class to the link.
Another way would be to use jquery to do this dynamically. Although asp is the best way to do it in your case.
//HTML
<nav>
<ul>
<li><a id ="A" href="Default.aspx">A</a></li>
<li><a id ="B" href="suppliers.aspx">B</a></li>
<li><a id ="C" href="ServiceLocation.aspx"> C</a></li>
<li><a id ="D" href="Default3.aspx"> D</a></li>
<li><a id ="E" href="jobs.html"> E</a></li>
<li><a id ="F" href="contactus.aspx"> F</a></li>
</ul>
</nav>
//jquery
$('nav ul li a').removeClass('current');
if (window.location.href.indexOf("Default.aspx") > -1) {
$('nav ul a#A').addClass('current');
}elseif (window.location.href.indexOf("suppliers.aspx") > -1) {
$('nav ul a#B').addClass('current');
}
//Css
Just copy the same styling form #current to .current
As others have said you should probably use a class rather than an id, unless you have a very good reason for it.
Here is the code for changing the id
$( "li > a" ).click(function() {
$('#current').removeAttr( 'id','current');
$( this ).attr('id', 'current');
});
or the class instead..
$( "li > a" ).click(function() {
$('.current').removeAttr( 'class','current');
$( this ).attr('class', 'current');
});
And here is your modified jsfiddle http://jsfiddle.net/39rc2Le5/2/
Update
If you use the class instead you will have something like this...
<nav>
<ul>
<li><a class="current" href="#">A</a>
</li>
<li><a class="" href="#3">B</a>
</li>
<li><a class="" href="#"> C</a>
</li>
<li><a class="" href="#"> D</a>
</li>
<li><a class="" href="#"> E</a>
</li>
<li><a class="" href="#"> F</a>
</li>
</ul>
</nav>
Then your tabs which are currently styled by a#current properties would be styled by a.current properties. So change your css selector like this.
nav ul li a.current {
background-color: #F9F9F9;
border-style: solid;
border-color: #ee1d78;
border-top: 15px;
border-left: none;
border-right: none;
}
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!
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.