Question

I am looking for a way in which I can grab an element id from my page like this:

<div id="events"> 
    <div id="event_1765" class="type_automotive start_125x125 color_Black"> 
        <h3>Leftlane News</h3> 
    </div> 
</div>

I would like to get the id=”events” but I need it in this script where the events is:

    $("input.type_check").click(function() {
        if($(this).is(':checked')) {
            $("#events div."+$(this).attr('id')).removeClass('type_hidden');
            $("#events div").not(".type_hidden, .start_hidden, .color_hidden").css("display","block");
        } else {
            $("#events div."+$(this).attr('id')).addClass('type_hidden');
            $("#events div."+$(this).attr('id')).css("display","none");
        }
    });

so, in other words I would like to replace the ‘events’ in the jquery script with a code that dynamically gets the id element on the html page.

Answer 1

Firstly, don’t use css() to hide them when you’re also putting a class on. You could just as easily do this in your CSS:

div.type_hidden { display: none; }

or just not use that at all.

$("input.type_check").click(function() {
  $("div." + this.id).toggle($(this).is(":checked"));
});

This:

• gets the ID attribute of checkbox that’s clicked (eg “type_automotive”);
• uses that in a class selector to hide/show divs with that class; and
• checks on the checkbox status to see if it needs to hide or show them.

There’s no need for a “type_hidden” class or css("display", "none") (which you shouldn’t do in preference to using jQuery effects anyway).

Note: this all assumes (from your site):

<input name="type[]" type="checkbox" id="type_automotive"
  value="automotive" class="type_check" checked="checked" /> 

and

<div id="events"> 
  <div id="event_1768" class="type_automotive start_300x250 color_Black"> 
    <h3>Autoblog</h3> 
  </div> 
</div>