1

Im looking for a bit of help with some jQuery code.

Basically i have a HTML structure like so.

<ul class="menu">
    <li><a href="#" id="parent-one">One</a></li>
    <li><a href="#" id="parent-two">Two</a></li>
    <li><a href="#" id="parent-three">Three</a></li>
    <li><a href="#" id="parent-four">Four</a></li>
</ul>

My PHP code adds a class="active" if the user is 'on' it, so depending on which of the links is clicked it will look like this:

<li><a href="#" class="active" id="parent-four">Four</a></li>

So thats all fairly straight forward.

What i want to be able to do on page load, is search through each menu item until it finds the one with class="active" .. then take the ID of that link, change it from parent-xxx to child-xxx and then 'show' that child ID.

Is this possible?

j08691
  • 204,283
  • 31
  • 260
  • 272
BigJobbies
  • 3,633
  • 11
  • 43
  • 66

6 Answers6

3
$(function() {
    // Within .menu, find .active, grab its id, and replace parent with child
    var new_id = $('.menu').find('.active').attr('id').replace('parent', 'child');

    // Select element with this new id, and show it.
    $('#' + new_id).show();
});​

Fiddle: http://jsfiddle.net/rwgJc/1/

Matt Stauffer
  • 2,706
  • 15
  • 20
  • Im getting an error with this one - Uncaught SyntaxError: Unexpected token ILLEGAL – BigJobbies Nov 07 '12 at 07:15
  • Ohhh, sorry about that ... it must have inserted illegal chars when i copied it .. wrote it out and works perfect ... thank you!!! – BigJobbies Nov 07 '12 at 07:31
  • Wouldn't it make sense to add some kind of routine to change which is active? – Wolfpack'08 Nov 07 '12 at 07:52
  • @Wolfpack'08 There are a lot of things that might make sense here, but only one that that specifically answers the question the OP asked. For example, why are we using jQuery to show the child, when we almost definitely could use PHP, since this is all happening on page load? – Matt Stauffer Nov 07 '12 at 15:41
2

Something as simple as this

var id = $('ul.menu li a.active').attr('id').replace('parent', 'child');
$('#' + id).show();
Chris Moutray
  • 18,029
  • 7
  • 45
  • 66
1
​$('ul li a').each(function(){
  if($(this).hasClass('active')){
      alert($(this).prop('id')); //your action here
  }
});​​​

//or as  techfoobar suggested
alert($('ul.menu li a.active').prop('id'));
Pragnesh Chauhan
  • 8,363
  • 9
  • 42
  • 53
1

Something like this should work:

// get the link with class 'active'
var activeLink = $('.menu li a.active');

// determine the new id, i.e. child-xyz
var newID = 'child-' + activeLink.attr('id').split('-')[1];

// assign that to the active link
activeLink.attr('id', newID);

// do other stuff with newID
techfoobar
  • 65,616
  • 14
  • 114
  • 135
0

You need to loop through all li elements and check whether the current li has class of active

DEMO 

$('ul li').each(function () {
     if($(this).hasClass('active')) {
           // do whatever you want
     }
});
Om3ga
  • 30,465
  • 43
  • 141
  • 221
  • Can you please tell me the significance of the i and the el? Sometimes I see `function(e){}`, and I think that `e` either means error... or... – Wolfpack'08 Nov 07 '12 at 06:31
  • i is for index. If you console.log(i) it will display `0,1,2,3` since there are four li. as far as e is concern we don't need that here in fact we dont need any of them here so I removed it. – Om3ga Nov 07 '12 at 06:34
0

Not an optimized one, but this will work

$("ul.menu li").each(function(){
a=$(this).find('a');
if(a.hasClass('active')){
id=a.attr('id');
a.attr('id',"child-"+id.split("-")[1]);
}
});

working demo: http://jsfiddle.net/sCUfp/

Vivek S
  • 5,384
  • 8
  • 51
  • 72