I have a code something like this:
<div id="specialDiv">
<div id="div1">
<div id="div2">
</div>
</div>
<div>
The div1 and div2 are hidden and right now in order to display them i am doing something like this:
$('#div1').show();
$('#div2').show();
It works but is there an elegant way to do this other than
$('#speicalDiv div').show();
Thanks.
You can use a multiple selector:
$("#div1, #div2").show();
$('#specialDiv div').show(); will show all div inside #specialDiv.
However, you don't have to hide the divs inside at all - hiding the parent is sufficient.
If you just wanted to show divs directly inside #specialDiv (in your case: #div1), you could select those using #specialDiv > div.
If you wish to add a class to the hideable divs, you can reference the class in the show()/hide() statements.
Otherwise, your method looks as elegant as possible.
Put the divs into a class. i.e.
$('.toshow').show();
Then they can be anywhere on the page and could be other things than divs if required.
Similar to what you've already suggested, you could do something like:
$('#specialDiv div').show();
But a more flexible approach would be to add a new class name to the divs you want to show:
<div id="specialDiv">
<div id="div1" class"hidden">
<div id="div2" class="hidden">
</div>
</div>
<div>
Then show them like so:
$('#specialDiv .hidden').show();
Related
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/
let's say I have an HTML structure like this:
<div class="first">
<div class="sub-1">
<div class="first again"></div>
</div>
</div>
How do I select only the div that has the class "first" but which is NOT inside the div that has the class "sub-1". In order words, how do I get only the outer div but extract any div inside that outter div that have the same class than the outter div (I want to get just the div with class="first", not the one with class="first again").
Thank you
See jQuery documentation for .not(). This should work:
$('.first').not('.sub-1 .first');
I dont know if you mean a very generic way to handle this but in this particular case you can only write.
$(".first:first")
A more generic way would be
$('.first').not('.sub-1 .first').prepend("I was first");
http://jsfiddle.net/JYLVc/
I want to insert an opening div but it closes itself automatically. How do I get this to work.
I want to wrap thses two divs in one div called controls...
<div class="carousel-prev prev-next"></div>
<div class="carousel-next prev-next"></div>
So I get...
<div id="controls">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
</div>
I did try:
$(".jcarousel-prev").before("<div id='controls'>");
But as I mentioned above, it closes automatically.
$(".prev-next").wrapAll("<div id='controls'>");
in your particular case you're removing class too i.e.
$(".prev-next").removeClass('prev-next').wrapAll("<div id='controls'>");
You can use .wrapAll():
$(".prev-next).wrapAll('<div />');
You should use wrap function to achieve that:
http://api.jquery.com/wrap/
try this...
$(".prev-next").appendTo("<div id='controls'>");
I'm trying to use next() to toggle a div. The problem is that the "trigger" is in a different div than the one I want to toggle. An example that works:
$("span.trigger").click(function(){
$(this).next("div.task_description").slideToggle("fast");
});
<span class="trigger">The trigger</span>
<div class="task_description ">
some content
</div>
But the way I need the html setup is:
<div>
<span class="trigger">The trigger</span>
</div>
<div class="task_description ">
some content
</div>
That doesn't work... any suggestions?
In this case you need a .parent() as well, like this:
$("span.trigger").click(function(){
$(this).parent().next("div.task_description").slideToggle("fast");
});
Alternatively, if your nesting may change, you can go up to the <div> you're in, like this:
$(this).closest("div").next("div.task_description").slideToggle("fast");
I want to hide all blocks which only contain hidden DIVs (aside from a caption). All elements have to be selected via class names.
In detail, I want each "eventBlock" not to show up when all "groupBlocks" underneath are already hidden. The same with "Menu" which should not show up when all child eventBlocks are hidden.
Each "Menu" contains multiple eventBlocks,
each "eventBlock" contains 1 or more groupBlocks.
I am using classes and cannot use IDs because there are lots of groupBlocks, eventBlocks etc.
DIVs are hidden using JQuery's "hide()" function, if it's relevant.
My HTML basically looks like this:
<div class="Menu">
<strong><a name="one">Menu CAPTION</a></strong><br />
<div class="eventBlock event1">
<p class="underlined">eventBlock CAPTION</p>
<div class="groupBlock group2">
<strong>name</strong><br />
4pm - 6pm<br />
</div>
<div class="groupBlock group1">
<strong>name</strong><br />
5pm - 7pm<br />
</div>
</div>
</div>
This should work:
var blocks = jQuery(".groupBlock");
if( blocks.size() == blocks.not(":visible").size() )
{
blocks.parents(".eventBlock").hide();
}
You can do something similar to hide the menu if all groupBlocks are hidden.
Simplest way is by using a single jQuery selector:
$('.eventBlock:not(:has(.groupBlock:visible))').hide();
Personally, I find the not() function more readable, and I can use end() later:
$('.eventBlock').not(':has(.groupBlock:visible)').hide();
Now, you want to hide the Menus as well? It seems a Menu should be hidden if it has no visible eventBlocks, which means it has no visible groupBlocks. So, we can use the same condition as before:
$('.eventBlock, .Menu').not(':has(.groupBlock:visible)').hide();
$('eventBlock').each(function() {
if ($('.groupBlock:visible', this).length)
$(this).show();
else
$(this).hide();
});
could be implemented as plugin