grab element id - jquery

Question

Hello, 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

Well, you'll need some "selector" for that div in that case. How can you locate it? Is it always the first div in some other 'unique' thing? Does it have a special class? You need some unique way of locating it.

Answer 2

I'm not sure I understand the question, but I think you want to hide corresponding divs when the input is checked. Also, looking at your html- there should only be 1 unique id per page. You should change id="events" to class="events". Once you do that, the javascript I think you're asking for is:

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

Also, instead of setting a class "type_hidden", then hiding/showing it with javascript, I'd do it just once in CSS.

Answer 3

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>