We Keep Coding

How to get nested DOM

How to get nested DOM.
I want to get the nested DOM by Jquery.
For example.
<div id="red">
<div id="member">A</div>
</div>
<div id="blue">
<div id="member">B</div>
</div>
<div id="yellow">
<div id="member">C</div>
</div>
Is it possible to get the each memver id like, yellow.member
I want to do like this.
$("#yellow.member").removeClass("myclass");

The way you wanted to access the child element of #yellow was real close to be correct.
$("#yellow .member").removeClass("myclass");
Notice the added space. The space means to look for another matching element in the descendant tree of the element matched by the previous selector.
Now it's your markup that is wrong. You just cannot use the same id more than once. The concept of id comes from long before the computer age... An "identification" is unique per definition!
Here is how your markup should look like... in a working example where the interval is just for fun:
$(document).ready(function(){
setInterval(function(){
$("#yellow .member").toggleClass("myclass");
},1000);
});
.myclass{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">
<div class="member">A</div>
</div>
<div id="blue">
<div class="member">B</div>
</div>
<div id="yellow">
<div class="member">C</div>
</div>

You can use nested selectors with jQuery:
$('#yellow #member').removeClass('myclass');
Removes .myclass from the #member element inside #yellow.
Also, your HTML isn't valid. You can use an ID only once per document, so change all <div id="member"> ... </div> to <div class="member"> ... </div>. Then the selector passed to jQuery changes to
$('#yellow .member')

What you're after is the .find() method.
$("#yellow").find('#member').removeClass("myclass");
Or children()
$("#yellow").children('#member').removeClass("myclass");
or
$('#yellow>#member'),removeClass("myClass");
EDIT: Also don't have duplicate id's. Use class attribute instead.

Append class name to an iframe id that is included under a div class

I have the following code
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
and I'm searching of a way to make it like this, using jQuery and CSS attributes matching:
<div id="ad">
<div id="adsensebanner" class="addedclass">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
Any ideas for searching for div that has another parent div and appending a class to the child one?

Your comments on various answers suggest your HTML is invalid and has more than one id="adsensebanner" in it, but just one id="ad" in it.
Your best bet is to make the HTML valid. There can be only one element with id="adsensebanner" in it.
However, if for some reason you want to only target that one element when it's inside id="ad":
document.querySelector("#ad #adsensebanner").classList.add("addedclass");
or with jQuery:
$("#ad #adsensebanner").addClass("addedclass");
That says "Add 'addedclass' to #adsensebanner only if it's inside #ad." There can be valid use-cases (if the one element with id="adsensebanner" may or may not be within #ad and you don't want to add the class if not), but they're rare.
If you correct the HTML to only have one id="adsensebanner", and you always want to add the class, then:
document.getElementById("adsensebanner").classList.add("addedclass");
or with jQuery:
$("#adsensebanner").addClass("addedclass");
In a comment you've said:
The double division check will definately work, however, my second div's ID name varies, so I would like to have it selected via an attr, like div[id*='adsensebanner']. Is there any workaround for this?
Yes, you can use any of the attribute substring selectors. For instance, if the id will always start with adsensebanner (id="adsensebanner1", id="adsensebanner2", etc.), then the selector to use with querySelector or jQuery would be "#ad div[id^=adsensebanner]". (Or you can use the contains one you mentioned, *=, or $= if it always ends with something.)

Try below:
$('#adsensebanner', window.parent.document).addClass("addedclass");

Simple JS can do the trick. And I can't see this div is inside the iFrame.
var p = document.getElementById("ad");
p.querySelector("[id='adsensebanner']").classList.add("addedClass");
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>

This is only by JavaScript:
document.getElementById("ad").getElementsByTagName("div")[0].classList.add("addedClass");
$( "#ad div:nth-last-child(1)" ).addClass("addedClass");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
<div id="ad1">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
This will add a class only to div which have parent div id="ad"

How to select leaf tags of an html document using jsoup

I am using jsoup to parse an html document. I need to extract all the child div elements. This is basically div tags without nested div tags. I used the following in java to extract div tags,
Elements bodyTag = document.select("div:not(div>div)");
Here is an example:
<div id="header">
<div class="container">
<div id="header-logo">
<a href="/" title="mekay.com">
<div id="logo">
</div> </a>
</div>
<div id="header-banner">
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
</div>
</div>
</div>
I need to extract only the following:
<div id="logo">
</div>
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
Instead, the above code snippet is returning all the div tags. So, could you please help me figure out what is wrong with this selector

This one is perfectly working
Elements innerMostDivs = doc.select("div:not(:has(div))");
Try it online
add your html file
add css query as div:not(:has(div))
check resulted elements

If you want only div leafs that do not have any children then use this
Elements emptyDivs = document.select("div:empty");
The selector you are using now means fetch me all the divs that are not direct children of another div. It is normal that it brings the very first parent div, because the div id="header" is not a direct child of a div. Most likely its parent is body.

Use the same JavaScript code for different divs

This is my JavaScript code:
Javascript
<script> $(document).ready(function(){
$("#showButton").click(function(){ $("#showContent").toggle("slow");
}); }); </script>
The question is how I can use same code for different <div>
Like using this code to open <div id=#showContent></div> and using same code but separately open <div id=#showContentSecond></div>
I have a lot of div elements and I don't want to code something everytime I want to manipulate an element.

The button will need to be related to the div in some way, if it isn't a child of the div, example:
<button class="mybutton" data-something="1">One</button>
<button class="mybutton" data-something="2">Two</button>
<div data-something="1">first</div>
<div data-something="2">second</div>
Javascript:
$(document).ready(function(){
$('button.mybutton').click(function(){
$('div[data-something=' + $(this).data('something') + ']').toggle();
});
});
Fiddle demo: http://jsfiddle.net/vcAtb/

You can use the document.getElementsByTagName element to get all divs.
document.getElementsByTagName("div")

Apply a CSS class to each element you want to have the same behavior
HTML
<div id="div1" class="toggleDiv"></div>
<div id="div2" class="toggleDiv"></div>
<div id="div3" class="toggleDiv"></div>
JavaScript
$(document).ready(function(){
$(".toggleDiv").click(function()
{
$(this).toggle("slow");
});
});
http://jsfiddle.net/gDG6n/

Move existing div to the body of HTML

I want to move an existing div which is inside another one to the body of HTML.
For example i have:
<body><div1><div2>blah</div2></div1></body>
I would like it to make:
<body><div1></div1><div2>blah</div2></body>
Any suggestions?

Give your divs some IDs:
<body>
<div id="one">
<div id="two">
</div>
</div>
</body>
Then use appendTo
$('#two').appendTo('body');

$('div2').appendTo('body');
(you'll have to change div2 to a proper selector of course)

use some combination of remove and append to achieve ur out put.
jQuery Remove Method
jQuery Append Method