I'm trying to append a class to an LI automatically if the filename matches the href (e.g; if the anchor has the href attribute set to about.php and the filename of the current page is about.php then it would append the class.) however, along the way I've hit some complications and I've been getting myself confused with the syntax a little...
So far I have this...
var filename = location.pathname.substring(1)
$(document).ready(function(){
$('a').each(function() {
if (this.href === filename) {
$(this).parent('li').addClass('current_page_item');
}
});
});
My navigation is constructed as shown here and as you can see, it works and everything but only when the class is set manually... so I'm trying to get it to be automatic from the actual filename.
I hope this make some sense to someone, as I'm really confused on how to get this working now!
Thank-you to anyone who contributes, it's of great help and will help me understand the jquery syntax further, actually selecting something specific and writing a logical statement in jquery really confuses me as it's very different to PHP, which is what I'm used to.
My markup looks like this, since I didn't include it before and just assumed people would look at the source code to understand what I was meaning (though, I should have put it here)
<nav>
<div class="container">
<ul class="group" id="effects">
<li>News</li>
<li>About</li>
<li>Races</li>
<li>Tools</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
Thanks.
I think you can do it as simple as this:
$(function(){
$('a').filter(function() {
return (this.href == location.href);
}).parent('li').addClass('current_page_item');
});
Filter the anchor tags by their href attribute. Seems to work on this JSFiddle. For some reason, you have to hit run for it to work.
I assume that li tag is parent of anchor tag than you can try this-
$(this).parent().addClass('current_page_item');
instead:
$(this).parent('li').addClass('current_page_item');
Based on what little information you've provided in your question, I'd suggest (though this is untested):
var file = document.location.href.split('/').pop();
$('li a').filter(function(){
return this.href.indexOf(file) !== -1;
}).parent().addClass('current_page_item');
This gets the contents of the current page's URL and splits it by the / character and then assigns the last element of the array to the variable file, for example:
'http://example.com/directory/page.html'
is converted into an array:
["http:", "", "example.com", "directory", "page.html"]
And the last element of that array is assigned to the variable, so file becomes equal to:
'page.html'
The jQuery iterates over every a element within an li element and then, if it finds the string page.html within the href attribute it returns that a element, and adds the class-name to its parent element.
You could, instead, use the full document.location.href, of course; which would give:
var page = document.location.href;
$('li a').filter(function(){
return this.href == page;
}).parent().addClass('current_page_item');
This works much the same way, but instead of looking to see if the filename can be found within the URL, it checks that the href of the element is exactly equal to the current document.location.href.
References:
JavaScript:
Array.pop().
String.indexOf().
String.split().
*jQuery:
filter().
Related
Below is my code..
var content = $("XXXX");
content.find("a").each(function() {
var value = $(this).attr('href');
$(this).attr('href', encodeURI(value));
alert(value);
});
However, it keep showing error.
How can I make this code work which I want to encode the url.
Instead of content.find('a') use content.filter('a'). Because right now you're content is an array of only one element (ie. <a>), so there is no more <a> within that <a> and .find('a') fails here.
So .filter() is safe to use.
Demo
No need to use JQuery.find here as content variable has only anchor tag and you want to apply encodeURI for your URL.
For that requirement below code is well enough.
$(content).each(function(){
var value = $(this).attr('href');
$(this).attr('href', encodeURI(value));
alert($(this).attr('href'));
}
);
Hope it helps you.
maybe you should add an ID (if you want to use this for more than one element then create a specific class for the elements and link via $(".classname")) to your link and then use a normal query like this
var yourLink = $("#yourID");
yourLink.attr('href', encodeURI(value));
and make sure that your value has something in it. Also if .attr(...) has still no effect please try .prop("href", encodeURI(value))
I am trying to clone an li element but without the tags.
I am have tried many different ways but I can make it seem to work.
When I take a look at the html of the li element it still selects the span tags.
Below is the code I am using. Any help would be really appreciated. Thanks!
<ul class="todo_list_items" data-category_id="44">
<li class="tasks" data-task_id="30">
<!-- Don't want to select this span class -->
<span class="modify_tasks">
<a href='#' class='delete_task_name'>Delete</a>
<a href='#' class='edit_task_name'>Edit Task</a>
</span>
Test
</li>
</ul>
<script>
$(document).on("click", ".edit_task_name", function () {
var task_id = $(this).data("task_id");
var previous = $(".tasks[data-task_id=30]").not(".tasks[data-task_id=30] > span").clone();
console.log(previous.html());
});
</script>
Just clone it and then empty it:
var previous = $(".tasks[data-task_id=30]").clone().empty();
EDIT: If you only want to remove the span and not other content, then just remove the span from the clone:
var previous = $(".tasks[data-task_id=30]").clone();
previous.children("span").remove();
not() will check against elements in the set, in your case the set consists of only $(".tasks[data-task_id=30]"). not() is testing the span inside it to see if it matches its own parent, so not wont be adjusting your jQuery object for cloning there. An alternative way to achieve what you want might be code similar to this:
var $tasks = $(".tasks[data-task_id=30]"),
$modifyTasks = $tasks.children('span').detach(),
$cloneOfTasks = $tasks.clone();
$modifyTasks.prependTo($tasks);
$cloneOfTasks.appendTo($tasks.parent());
.detach() removes the span without losing events and data so you can put it back in when your done making your clone.
Alternatively this code might be easier to interpret and use:
var $tasks = $(".tasks[data-task_id=30]");
$('ul.todo_list_items').append($tasks.contents().not('span').clone().wrap('<li class="tasks" data-task_id="30">').closest('li'));
This uses .contents() to grab whats inside the task so you can run not against it. The closest('li') part is needed to ensure the li wrapped around the new element is returned for appending to the ul.
I have a list of links, one has the class active.
On my next button click id like to remove the class from the current element and add it to the next only I cant seem to get it to add?
Ive made a fiddle to hopefully explain my problem, any help would be great, thanks
http://jsfiddle.net/h6D4k/
$('.next').click(function(){
$('ul.pagination').find('a.active').removeClass('active');
$('ul.pagination').find('a.active').next('a').addClass('active');
return false;
});
One of the jQuery most usable conveniencies is that its methods are (usually) chainable - in other words, they return the very object they are called from. So you can simply write this:
$('ul.pagination').find('a.active').removeClass('active').closest('li')
.next('li').find('a').addClass('active');
... as it's <li> elements that should be 'nexted', not <a> ones. But in fact, you shouldn't probably discard 'active' altogether if it's the last element in question:
var $a = $('ul.pagination').find('a.active'),
$li = $a.closest('li'),
$nextLi = $li.next('li');
if ($nextLi.length) {
$a.removeClass('active');
$nextLi.find('a').addClass('active');
}
This is actually what you want based on your html structure in you fiddle. http://jsfiddle.net/h6D4k/1/
$('ul.pagination').find('a.active').removeClass('active').parent()
.next().find('a').addClass('active');
Because once you've done this...
$('ul.pagination').find('a.active').removeClass('active');
There is no more a.active - the active classname has been removed from that element. So repeating the same selector...
$('ul.pagination').find('a.active')//...
... will select nothing.
Chain it all together instead.
$('ul.pagination').find('a.active').removeClass('active').next('a').addClass('active');
You have a second problem. According to the jQuery API for next(), it will:
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
You're not trying to get the following sibling:
<ul class="pagination">
<li><a class="one active" href="#">X</a></li>
<li><a class="two" href="#">X</a></li>
<li><a class="three" href="#">X</a></li>
</ul>
Next
Prev
You're trying to get the next <a> in the whole document. That's more challenging - and I'm not sure how to do it.
I would write it this way, preventing the action from doing anything on the last li as well.
http://jsfiddle.net/h6D4k/6/
$('.next').click(function(e){
e.preventDefault();
if ($("ul.pagination a.active").parent().is(":last-child")) return;
$('ul.pagination a.active').removeClass('active').parent().next().find("a").addClass('active');
});
You have two errors in your code:
Once removed, the active class can't be found anymore
your a tags are nested in li tags so next() doesn't work as you expect
To simplify things, you could attach the active class to the li tags.
Live demo: http://jsfiddle.net/h6D4k/7/
Code:
$('.next').click(function(){
$('ul.pagination').find('li.active').removeClass('active')
.next().addClass('active');
return false;
});
My navigation menu on header looks like this:
<ul id="nav">
<li id="home">
<a class="mainmenu" href="#">Link1</a>
</li>
<li>
<a class="mainmenu" href="#">Link2</a>
</li>
</ul>
and the same markup is used for the footer section and it's not working.
I have also a file called jscript.js which contains all the javascript for the website,
and I found this variable:
var navTarget = "ul#nav li a" //menu link to target
Also, if I remove for example the markup in the header sections the footer will work.
I've tried also to use .nav instead of #nav and I have the same problem.
The navigation menu is controlled by javascript, I don't post the code here because it's huge, for better understanding of how the navigation menu works look here
I've found this in the javascript:
//SET MENU ITEM IDs
$(navTarget).each(function(i){
i++
this.id = this.id +"_" +i ;
});
//MENU CLICK FUNCTION
$(navTarget).click(function() {
//ensure link isnt clickable when active
if ($(this).hasClass('active')) return false;
//get id of clicked item
activeNavItem = $(this).attr('id');
//call the page switch function
switchContent();
});
//CONTENT SWTICH FUNCTION
var switchContent = function (){
//set previous and next link & page ids
var PrevLink = $(navTarget+'.active')
$(PrevLink).removeClass('active');
var PrevId = $(PrevLink).attr('id');
//alert(PrevId)
var NextLink = $('#'+activeNavItem).addClass('active');
var NextId = activeNavItem
//alert(NextId);
From the looks of it, the JS code is using some CSS selector (like jquery's $ or dojo's dojo.query) that pulls in the DOM element target based on the value of navTarget, and then does something with it: turns it into a menu.
But its only doing it once.
You need to look at the JS and see where navTarget is used. Then it should be fairly easy to make it do the menu creation on all the results of $(navTarget) instead of just the first hit.
Also, you should only have on instance of an ID in your dom.
You can change this to a class instead:
var navTarget = "ul.nav li a"
And in the markup:
<div class='nav'>
But you will still have to look at the JS and make sure it functions against a set of targets returned by the CSS selector. That code is probably expecting just a single result and using just it: results[0].
You can only have one element of a given id on the page. So based on your description, it sounds like you have 2.
I don't know exactly how this script works, but you can try using classes instead.
<ul class="nav">
var navTarget = "ul.nav li a";
You would have to change your HTML and the JS navTarget selector string.
But there is also a good chance that your script may not support creating multiple menus at all. And if thats the case, you may need to fix that script or find a better one.
If the code for the footer really is identical to the header, that's the problem. An id should only be used for a single element in a page, and jQuery's selectors will only return the first. Meaning code like "ul#nav li a" only works on the header.
Easiest solution is to change the id's to classes, e.g.:
<ul class="nav">
... and change your jQuery to match that, e.g.:
var navTarget = "ul.nav li a";
Update: And (ignoring that this may end up turning into three duplicate posts), that fix is probably not enough at all, since other parts of the script may only work with a single menu.
I have a small problem with a jQuery script I wrote.
I have an HTML structure like this:
<div id="navigation">
<ul>
<li><b>Text1</b></li>
<li><b>Text2</b></li>
...
</ul>
</div>
Then, I have a click function binded to those li/a tabs that sets the value of the current page to href:
var currentpage = $(this).attr('href');
And, finally, an update function that is fired when it's needed that do many thing, but also changes the style of the currently selected li/a tab:
$('#navigation a').each(function()
{
var tab = $(this);
tab.parent().toggleClass('current', (tab.attr('href') == currentpage));
});
Everything works fine, but today I was trying to rewrite the last function on one line only -without calling each()- and I can't get it to work.
I've tried many solutions like:
$('#navigation a').parent().toggleClass('current', ($(this).children(':first').attr('href') === currentpage));
$('#navigation a').parent().toggleClass('current', ($(':only-child', $(this)).attr('href') == currentpage));
Can someone help me out?
Thanks!
You can't rewrite it as you'd like to.
The original code has to use ".each()" because it needs access to each individual <a> element in order to do its thing. In your rewrite, you're imagining that you can get this set to each element being processed, but that's just not how this works in JavaScript. In your attempted rewrite, the value of this in those parameters to "toggleClass()" will be this as it stands outside that entire jQuery function call chain. It'll have absolutely nothing to do with the <a> elements being processed by the call to "toggleClass()".
when your function is triggers i.e. on clicking the in that function you can get the reference to the clicked element, tag by using $(this). Then your code should be
$(this).parent().toggleClass('current', ($(this).children(':first').attr('href') === currentpage));