jquery how to select the next element after the current element - javascript

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

Related

Jquery set class to all elements except element with specific class + children/children of children

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.

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.

Target the child only not the sub-child by Jquery

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

How to replace a <ul> inside a div by its div id?

How do you replace a <ul> inside a div by using the div's id in jQuery,
<div id="example">
<ul>
Content To Be Replaced...........
<ul>
</div>
$("#example ul").text('Content to replace');
You can select the div with the ID selector #. A space is used as an descendant selector, and .text changes the text content. You could also use .html to replace HTML content.
Simply do:
$("#example ul").html('New Content');
I presume you mean something like this?
$('#example ul').html('new content');
Absolutely no jQuery is needed:
var div = document.getElementById("example");
div.firstChild.nextSibling.textContent="bla";​ //div
// textnode -> ul -> text
This can be compacted to:
document.getElementById("example").firstChild.nextSibling.textContent="bla";​
// div --> textnode --> ul --> text
Yes, it is more code than jQuery, but it's also a lot faster..
You could even use:
document.querySelector('#example ul').textContent="bla";
Still 4-5 times as fast as jQuery, but using very similar, semantic syntax. No need to drop native JS because it's "hard" or anything.

jquery .next isn't working?

take this simple code:
<div id="container">
<div class="box">abc</div>
<div class="box" id="secondbox">abc</div>
<div>generic</div>
<div>generic</div>
</div>
Now I add the class box to let's say the last div generic:
$('#container div:last').addClass('box');
Now if i try to select the next .box with this it doesnt' work:
$('#secondbox').next('.box')
returns .length=0
I presume what you actually mean is #container div:last.
next does not find the next element that matches a selector. It finds the next sibling element. If you supply a selector, it tests the element against that selector. If the test fails, an empty selection (i.e. length == 0) is returned.
You need nextAll:
$('#secondbox').nextAll('.box').first();
You should replace $('#container p:last').addClass('box'); with $('#container div:last').addClass('box');
And as lonesomeday said. You should use nextAll selector.

Categories