JQuery selector: pass on id from array into function

Question

I have a list of items

<div id="item1">somestuff</div>
<div id="item2">somestuff</div>
<div id="item3">somestuff</div>

When someone clicks on one of these, I need to take some actions based on the id (the number). Let's say hide it.

How can I make the function generic, and how can I pass the id into the function?

$(document).ready(function()
{
$("#item-howcanImakethisselectorgeneric?").click(function () { 
  $("#item-andhowcanIpasshteidintohere?").hide();
}
}

I'm a javascript/jquery newbie, any help (including rtfm) appreciated.

John Hartsock · Accepted Answer · 2010-05-21 16:41:12Z

1

<div id="item1" class="mygenericClass">somestuff</div>

<div id="item2" class="mygenericClass">somestuff</div>

<div id="item3" class="mygenericClass">somestuff</div>

$(document).ready(function() 
{ 
  $(".mygenericClass").click(function () {  
    //if you want the id then $(this).id
    //if you just want to hide the clicked element then
    $(this).hide(); 
  }); 
}

answered May 21, 2010 at 16:41

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

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

2 Comments

PeterV Over a year ago

Perfect. How can I get the id without the "item" text, ie. just the number?

John Hartsock Over a year ago

var justTheNumber = ($(this).id).replace("item", "")

puffpio · Accepted Answer · 2010-05-21 16:38:54Z

0

try this:

<div id="item1" class="stuff">somestuff</div>
<div id="item2" class="stuff">somestuff</div>
<div id="item3" class="stuff">somestuff</div>

JS:

$(document).ready(function()
{
   $("#item1, #item2, #item3").click(function () { 
     $(this).hide();
   }
}

or even better:

$(document).ready(function()
{
   $("div.stuff").click(function () { 
     $(this).hide();
   }
}

or this if you will be dynamically adding more divs into the page after loading and don't want to explicitly add the event handlers

$(document).ready(function()
{
   $("div.stuff").live("click", function () { 
     $(this).hide();
   }
}

answered May 21, 2010 at 16:38

puffpio

3,4726 gold badges39 silver badges42 bronze badges

2 Comments

puffpio Over a year ago

if you need to get the actual text of the id within the function, you can use "this.Id"

PeterV Over a year ago

awesome. And to get only the number, so not "item1" but just "1"?

Collectives™ on Stack Overflow

JQuery selector: pass on id from array into function

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related