jQuery selector string + dynamic variable

Question

I want to get URL parameters and extract last param from:

http://localhost/projecct/Menus/page/8

This gives me 8:

var url = window.location.toString();
var pid = url.substring(url.lastIndexOf('/') + 1); // this gives 8
var currentMenu=('menu'+pid);                      //this gives menu8
alert($('.'+currentMenu).html());                  //but this give me null 
//the above line is where I stucked

I want to make CSS property display:block for the parent all uls selected with:

$('.'+currentMenu).parents("ul").css({'display':'block'});

HTML:

  <ul>
     <li class='menu1'>
        <a href='#'>Menu1</a>
        <ul>
           <li class='menu11'>
               <a href='#'>Menu11</a>
               <ul>....</ul>
           </li>
        </ul>
     </li>

     <li class='menu2'>
        <a href='#'>Menu2</a>
        <ul>
           <li class='menu21'>
               <a href='#'>Menu21</a>
               <ul>....</ul>
           </li>
           <li class='menu22'>
               <a href='#'>Menu22</a>
               <ul>....</ul>
           </li>
        </ul>
     </li>

     <li class='menu3'>
        ..........
     </li>
  </ul>

Without seeing some of the HTML, how are we supposed to know why your selector fails to find an element ? — adeneo
– adeneo, Commented Jul 7, 2014 at 17:50
If you're getting null, it means there's no class="menu8" on the page. — Barmar
– Barmar, Commented Jul 7, 2014 at 17:51
@adeneo Just because you could, doesn't mean you should. :) — Barmar
– Barmar, Commented Jul 7, 2014 at 17:51

T.J. Crowder · Accepted Answer · 2014-07-07 18:04:10Z

2

The problem is that as of when that code runs, there is no .menu8 element on the page. This could be because it doesn't exist yet, or because you never put one on the page at all.

If this code is running on page load, and you do define an element with the class menu8 in the HTML, move that code into a script tag at the bottom of the page, after all your DOM elements have been defined, so that they'll be there when the code runs.

E.g., this will fail:

<script src="yourcode.js"></script>
<!-- ... -->
<li class="menu8"></li>

but this will work:

<li class="menu8"></li>
<!-- ... -->
<script src="yourcode.js"></script>

This is one reason that the usual recommendation is that unless you have some strong reason to do otherwise, put your scripts at the bottom of the page, immediately before the closing </body> tag.

(If your code adds the .menu8 element later, then you'll have to run your code using it after it has been added.)

If you don't have control over where the script elements go, then you can wrap your code in a "ready" handler:

$(document).ready(function() {
    // your code here
});

or the shortcut version of it:

$(function() {
    // your code here
});

But if you control where the script tags go, there's no need.

edited Jul 7, 2014 at 18:04

answered Jul 7, 2014 at 17:56

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3813434 Over a year ago

I have already did that, I placed js code at end of page, but I think I have problem with selector bcz alert $('.'+ currentMenu).length returns 0, that means no object selected

T.J. Crowder Over a year ago

@user3813434: The selector is fine, provided you really are trying to find an element with the class menu8. That element has to be on the page as of when the $() function trying to find it runs. If it is, and the script runs after that element exists, it works: jsbin.com/namavewi/1

Collectives™ on Stack Overflow

jQuery selector string + dynamic variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related