CODEWITHSUNDEEP
jquery
Spyderfusion02
Spyderfusion02

Reputation: 1073

grab element id - jquery

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.

Upvotes: 0

Views: 1463

Answers (3)

cletus
cletus

Reputation: 625387

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>

Upvotes: 1

Brian Pan
Brian Pan

Reputation: 144

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.

Upvotes: 0

Noon Silk
Noon Silk

Reputation: 55172

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.

Upvotes: 0

Related Questions