jquery - Passing a parameter to javascript function via CSS Selector - Stack Overflow

admin管理员组

文章数量:1325675

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...

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...

• javascript
• jquery
• html
• css
• dom

Share Improve this question Follow edited Sep 6, 2012 at 4:48 Danil Speransky 30.5k66 gold badges6969 silver badges7878 bronze badges asked Sep 6, 2012 at 3:50 Melbourne2991Melbourne2991 11.8k1212 gold badges4747 silver badges8282 bronze badges 2

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

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Demo: http://jsfiddle/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').

$("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]);
})

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>

try this

$('ul li').on('click', function(){
    alert($(this).prop('class').split('_')[1]);
});

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)

$('[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.

本文标签： jqueryPassing a parameter to javascript function via CSS SelectorStack Overflow