Target the child only not the sub-child by Jquery - javascript

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");

Related

jquery how to select the next element after the current element

<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');

How to hide a div that doesn't have an ID

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.

select outer and child ,without inner div

<div class="outer">
<div class="inner">
<div class="child">
</div>
</div>
</div>
I want to select outer and child only. But selecting outer will include inner and child. If I used not ie $(".outer , .child").not(".inner"), it will exclude child too.
ie I want to select outer and child ,without inner.
As you can't select it perfectly using a single query, you'd be better taking it out of the DOM (You can't get the results you want as is)
//So clone it it from the dom
var outer = $('.outer').clone();
var child = $('child').clone();
// Remove the `Inner` from the cloned version
outer.find('.inner').detach();
// Add the child to the outer.
outer.append(child);
You can use:
$('.outer, .outer :not(.inner)')
just use .outer,.child:
$('.outer,.child')
Use like this:
$('.outer .child').not('.inner .child');
demo
Or, how about using this:
$('.outer > .child')
demo
Or, are you referring like this:
$('.outer, .outer .child').not('.inner .child');

How to select HTML elements which don't have any attributes defined on them?

I need to use jQuery to locate all DIV tags that have no attributes on them and apply a class to each. Here's a sample HTML:
<div id="sidebar">
<div>Some text goes here</div>
<div class="something">something goes here</div>
<div>Another div with no attributes.</div>
</div>
So, I need to take that and turn it into this:
<div id="sidebar">
<div class="myClass">Some text goes here</div>
<div class="something">something goes here</div>
<div class="myClass">Another div with no attributes.</div>
</div>
How do you locate elements of type div that have no attributes via jQuery? Thanks.
Here you go:
$('div', '#sidebar').filter(function () {
return this.attributes.length === 0;
})
Live demo: http://jsfiddle.net/phbU9/
The attributes property returns a list of all attributes set on the element. "Naked" elements have an empty attributes list.
Update: Be sure to read Tim's answer below which provides a solution for older versions of IE, since my own solution doesn't work in IE8 and below.
#Šime's answer is close but doesn't work in IE 6, 7 or 8, where an element's attributes collection has an entry for every possible attribute, not just those specified in the HTML. You can get round this by checking each attribute object's specified property.
Live demo: http://jsfiddle.net/timdown/6MqmK/1/
Code:
$("div").filter(function() {
var attrs = this.attributes, attrCount = attrs.length;
if (attrCount == 0) {
return true;
} else {
for (var i = 0; i < attrCount; ++i) {
if (attrs[i].specified) {
return false;
}
}
return true;
}
});
check this out:
http://jsfiddle.net/thilakar/CHux9/
You need to give some sort of selector, in this case Ive used your side bar but it can be anything. Then get the children that have no class attribute and add a new class. See JSFiddle for the example:
http://jsfiddle.net/HenryGarle/q3x5W/
$("#sidebar").children('div:not([class])').addClass('newClass');
So this would return the 2 elements with no class tag and leave the sidebar and div with the class completely unaffected.
You could use a combination of jQuery's has attribute selector and the not selector. For example:
$('div:not([class], [id])').addClass('myClass');
jsFiddle demonstrating this
With this approach, you need to explicitly specify the attributes to check the presence of. Sime's solution would apply the class to divs that do not have any attributes at all.
To expound upon Tim Down's answer, I recommend checking that the attrs var not null special cases where the html has comment tags, etc.
try $('div:not([class])').addClass('myClass');
it is a general approach because the class will apply to all the div that have no class
$('#sidebar div')` or more general `$('div'); //returns collections of divs
to answer the question:
$('#sidebar div').addClass('myClass');

jQuery looping through .children of .children

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();

Categories