Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite

So, in short, I have a set of .li 

<ul>
  <li class="lmit_1"><a href="#" >Home</a></li>
  <li class="lmit_2"><a href="#">About us</a></li>
  <li class="lmit_3"><a href="#">Who we are</a></li>
  <li class="lmit_4"><a href="#">Whats new</a></li>
  <li class="lmit_5"><a href="#">Contact Us</a></li>    
</ul>

and my javascript (jQuery)

<script>
  $(".lmit_" + id).click(function () {
    alert(id);
  });
</script>

What I am trying to do is receive whatever number is at the end of the css class as a parameter (.lmit_3 for example would allow id = 3) and therefore alert(id) should lead to a popup with the number 3? I am new to both programming and javascript so my apologies if the answer is staring me in the face...

share|improve this question
Why can't you give all of them a common class and make the lmit_n an id? There's little use to having unique classes. – Blender Sep 6 '12 at 3:53
@Blender: Or better, use a data attribute to carry the, um, data. – mu is too short Sep 6 '12 at 4:11

6 Answers

up vote 4 down vote

Demo: http://jsfiddle.net/sFwZj/1/

$('li').click(function () {
  alert($(this).attr('class').split('_')[1]);
});

In your code you use undeclared variable called id, so it should throw error ReferenceError: id is not defined, when you try ".lmit_" + id.

And also I think you should use id not class for this, also as was mentioned probably it will be better if you will store number in something like data-id attribute, then you may get it by $(this).data('id').

share|improve this answer
$(".lmit_" + id) ? – timidboy Sep 6 '12 at 3:53
I tried your code <script> $(".lmit_1").click(function () { alert($(this).attr('class').split('')[1]); }); </script> This worked, but not ".lmit" +id – user1650757 Sep 6 '12 at 3:54
works, thanks heaps! Out of curiousity what was my code trying to do? or was it completely off the mark? – user1650757 Sep 6 '12 at 3:57
Completely off.. unless you had a function that actually passed in id as a parameter that you could use.. or if it was inside a loop.. but id didn't represent anything – wirey Sep 6 '12 at 4:00
.prop is supposedly better than attr – mplungjan Sep 6 '12 at 5:00
up vote 1 down vote

try this

$('ul li').on('click', function(){
    alert($(this).prop('class').split('_')[1]);
});
share|improve this answer
@user1650757 is the code working? – Codegiant Sep 6 '12 at 4:02
up vote 1 down vote

It is probably best to store any data that you want to use in the data attribute. This way you are not relying on classes and ids too heavily (and string processing) as well as have some separation between formatting and functionality.

Your html will look like this:

 <ul>
<li class="lmit" data-myattr="1"><a href="#" >Home</a></li>
<li class="lmit" data-myattr="2"><a href="#">About us</a></li>
</ul>

note that data-myattr can be called anything with a "data-" prefix.

to access your data 

       $(".lmit").click(function(){
//you can access it as an attribute
        alert($(this).attr("data-myattr"));
//or you can access it as data
           alert($(this).data("myattr"));
        })

or for even more classless solution use event delegation

$("ul").delegate("li", "click", function() {
 alert($(this).data("myattr"));
});

so you do not need lmit class at all in your html

 <ul>
<li data-myattr="1"><a href="#" >Home</a></li>
<li data-myattr="2"><a href="#">About us</a></li>
</ul>
share|improve this answer
A data attribute is (IMO) the right way to attach arbitrary data to an element. – mu is too short Sep 6 '12 at 4:13
up vote 0 down vote 
$("li").click(function () {
  alert(this.className.split('_')[1]);
});

should do it

But why not

    <ul>
     <li class="lmit" id="lmit_1"><a href="#" >Home</a></li>
     <li class="lmit" id="lmit_2><a href="#">About us</a></li>

with

$(".lmit").click(function () {
  alert(this.id.split('_')[1]);
})
share|improve this answer
up vote 0 down vote

The answers above are all correct. If you wanted to grab the item number in the <ul>, you have an alternative.

$('li').click(function() {
    alert($(this).index()+1);
});

The benefit is that you will not have to generate the class names (if that is all they are used for)

share|improve this answer
up vote 0 down vote 
$('[li][class^="lmit_"]').click(function () {
  alert($(this).attr('class').split('_')[1]);
});

if you use $('li') if u click on any li it does not have "limit_" class also will be fired.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.