I need to write a piece of code (I am thinking of JavaScript/jQuery) that would hide the two divs highlighted. The problem is that they do not have IDs and they belong to classes but are not the only objects in those classes. So I cannot hide the classes, because that will hide more things that I want. The "parent" div has an ID.
Please find the code here:
Is there any way I can reference the divs that I want to hide by the order number from the parent? Any other solution would be greatly appreciated.
As I see that those elements are sub child of an element with an id of #view so you can make use of nth- selectors or you can use jQuery :eq()
$("#view > div:nth-of-type(3) > div:nth-of-type(2),
#view > div:nth-of-type(4) > div:nth-of-type(1)").hide()
Or using CSS (Recommended)
#view > div:nth-of-type(3) > div:nth-of-type(2),
#view > div:nth-of-type(4) > div:nth-of-type(1) {
display: none;
}
Here, the first selector i.e #view > div:nth-of-type(3) > div:nth-of-type(2) selects a third div element which is a direct child to an element having an id of #view and further it selects a direct div element which is a second child of that type
Second selector i.e #view > div:nth-of-type(4) > div:nth-of-type(1) selects fourth direct div child element to an element having an id of #view and further, it selects first direct child div
This worked for me If there is no other sibling with same class name.
HTML
<div>
<div class="child"></div>
</div>
<div id="parent">
<div class="child">
</div>
</div>
<button onclick="hideDivs()">Hide</button>
Javascript
function hideDivs() {
var parentDiv = document.getElementById('parent');
var childDivs = parentDiv.getElementsByClassName('child');
for (var i = 0; i < childDivs.length; i++) {
childDivs[i].style.display = "none";
};
}
I am not a fan of coding by position (e.g. the 3rd or 4th element) because relatively minor changes to the markup such as just adding a new div for spacing can break code that relies on specific hard-coded positions.
If you want something that won't break when there are changes to the markup that might change the relative position of items, then you have to look for more specific content that you want to hide. There are many different ways to do this depending upon what you know about the content and what is the best marker to indicate that you have the right div.
Here's one way that looks for unique identifiers in the content you want to hide, then goes up to the proper parent to hide that content:
$("#RoleListTB").closet(".h1r1").hide();
$("#AccessProfileListTB").closest(".h111").hide();
You could use the table's ids to identify the container.
$("#RoleListTB").closest(".hlrl").hide();
closest() is looking up the DOM to the next matching parent, so you can start at your table as shown.
i've made a fiddle for this:
<a href="#" id="toggle" >show/hide</a>
<div>
<div class="hlrl">
<span id="RoleListTB">
RoleList Table
</span>
</div>
</div>
$("#toggle").click(function(){
$("#RoleListTB").closest(".hlrl").toggle();
});
http://jsfiddle.net/NGVQ3/
You could easily do this by using a CSS pseudo-selector in your query.
$('#view').find('div.h1r1:nth-of-type(2)')
or you could just be more specific
.h111+.h1r1
You can use :gt Jquery selector to search by index:
$( ".some:gt(0)" );
0 - is first .some
You can use the :eq selector to select an element at a particular index.
Assume the parent div has an id parent
it had child div's having the class sub.
so if you want to hide the second child element
$("#parent .sub:eq(1)").hide();
since the child ordering starts with `0' index
If you are sure that their positions are fixed and that won't change, then you could use nth-child selector.
Something like this:
$("#view").children("div:nth-child(3)").children("div:nth-child(2)").hide();
$("#view").children("div:nth-child(4)").children("div:nth-child(1)").hide();
Or, just:
$("#view > div:nth-child(3) > div:nth-child(2)").hide();
$("#view > div:nth-child(4) > div:nth-child(1)").hide();
Alternatively, using .eq:
$("#view").children("div").eq(2).children("div").eq(1).hide();
$("#view").children("div").eq(3).children("div").eq(0).hide();
Note: .eq is zero-based.
Divs can have more than one class . . .
<div class="h111">
changed to
<div class="h111 hideDiv">
CSS
.hideDiv {display: none;}
then use javascript to show it when you want it to be shown :)
Your div contains the tables which have a ID. So you can use
$('#yourTableIDHere').parent().hide();
This code will hide your div.
Related
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
I want to hide all elements except for an element with a specific class AND all elements inside this.
right now im using
$("body").not(".embedded").hide();
But it also hides the elements inside my .embedded element.
I appreciate every help.
Use * and space to indicate all direct/nested children. Also, for the initial selector, use body * to indicate all children before the not() filtering
$("body *").not(".embedded, .embedded *").hide();
Here you are:
$('body :not(".class2")').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="class1">11111</span>
<span class="class2">
10
<span class="class21">11</span>
<span>12</span></span>
<span class="class1">11111</span>
Hope this helps.
<div id="main">
<ul>
<li><div></div></li>
</ul>
<div>needs to be selected</div>
<div></div>
</div>
How can I select, using jquery, only the first div inside the main div?
Or
How can I select, using jquery, only the first div after <ul>?
I tried doing this but didn't work:
$('#main ul').next('div:first').addClass('my_class');
Try with a child selector:
$('#main > div').addClass('my_class');
If you have more than one direct child div and want the first one, you can do:
$('#main > div').first().addClass('my_class');
The easiest way would be to add a class to the div you are interested in so that you can easily identify it:
<div class="to-be-selected">needs to be selected</div>
then
$('#main > div.to-be-selected').addClass('my_class');
or even
$('#main .to-be-selected').addClass('my_class');
etc.
You can do simply like that.
$("#main").find("ul").next().addClass("my_class");
Hope it will be work for you.
Standard CSS selectors will do, no need for jQuery extravaganza:
First div inside #main, using :first-of-type:
jQuery('#main > div:first-of-type').addClass('my_class').
First div after ul, using the adjacent sibling selector.
jQuery('#main > ul + div').addClass('my_class');
If I have the following Markup
<div class='parent'>
<div class='first'>
First Child
<div class='second'>
Sub-child
</div>
</div>
</div>
and Below is Jquery
$('.parent').children().css("color","#00b3ff");
In result it changes color of both child,as I want to select the First child only (not by class).
how about something like this:
$('.parent').children().css('color', '#00b3ff').find('> div').css('color', 'black')
By using '>' the rule will be applied only on the immediate children, rather than all the children (when using .children())
Another thing you need to do is to ensure the child will not inherit the parent's color, can be done by explicitly giving it color.
Here's JSFIDDLE
You can't simply do it like that, the css properties are inherited by the chidlren - so if you apply a color to first it will get inherited by second since it is a decedent of first
Since we cannot apply style to text nodes a possible solution is to wrap the text node with an element and style it as given below
$('.parent > div').contents().filter(function(){
return this.nodeType == 3 && $.trim($(this).text()).length > 0;
}).wrap('<span />').parent().css('color', '#00b3ff');
Demo: Fiddle
DEMO
var sel = $('.parent').children();
var old_color = sel.css('color');
sel.css('color', '#00b3ff');
sel.children().css('color', old_color);
No one post it, so, using only CSS:
DEMO
.parent > div{
color:#00b3ff;
}
.parent div div {
color:black;
}
$('.parent').next('div').css("color","#00b3ff");
$(".parent > div:eq(0)").css("color","#00b3ff");
$(".parent > div:first").css("color","#00b3ff");
$('.parent').children( '.first' ).css("color","#00b3ff");
I've been looking over previously asked questions and can't seem to find a solution for my scenario...
I'd like to be able to loop through all children and children of children, etc...
the markup from design looks similar to this
<div>
<div>
<label></label>
</div>
<div>
<label></label>
</div>
<div>
<label></label>
</div>
</div>
I'd like to be able to select all labels within a specific div, regardless of their direct parent.
I'd like to be able to select all labels within a specific div, regardless of their direct parent.
It's just CSS selector notation. Assuming that <div> has an ID of myDiv:
$('#myDiv label').each(function ()
{
// do stuff
});
You do not need to keep stepping down through children in order to find labels within a specific div. This will do the job for you:
$('#idOfDiv label')
$('div label') will select any descendant of that div, regardless of depth. If you want it to be children or children of children, you can select like $('div > label, div > * > label')
Use the find function (instead of children) like so: $('#container').find('label')
$('div:first').find('label') will give you each label element
To select all labels:
$('label').something();
To select all labels contained in a div:
$('label', 'div').something();