To select the specific <div> (for e.g the <div> commented as <!-- This one!)Please note all of <..> elements are unknown elements at all levels, BUT NO <div>'s.
<div></div>
<div class="class1">
<..>
<..></..>
<div></div>
<div></div>
<div> <!-- 3rd-child div, of its parent -->
<..></..>
<..>
<div></div>
<div></div> <!-- This one! The 2nd-child div, of its parent -->
<div></div>
</..>
</div>
<div></div>
</..>
</div>
In this scenario, the only logic i can think is:
ONLY the element type as <div>s and the nth numbers (among siblings) are KNOWN.
Middle elements are unknowns. Can be <p> or <table> or <ul> whatever, but not <div>s again.
Levels are unknown.
So:
The target <div> is recursively located under the div#class1
It is the 2nd <div> inside the 3rd <div> of div#class1
How can i get it?
Sorry everyone, i have my own answer already:
$("div.class1 div:eq(2) div:eq(1)").html()
Related
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.
I want to replace all content (div header) main tag from template (header div & footer).
<main class="central">
<div id="main" class="central__content">
<div id="intro" class="intro"/>
</div>
<footer class="footer"/>
</main>
<template id="rules">
<header class="header">
...
</header>
<div class="rules">
</div>
<footer class="footer">
...
</footer>
</template>
I think that first step is get content - array of three tags, but content and textConten is empty.
var currentTemplate = document.querySelector('#rules');
var divFromTemplate = currentTemplate.content;
but divFromTemplate is empty.
The querySelector() function returns an Element object which has no property called content. You may want to try the Outer Html or textContent for better performance.
Reference for the Element Object:
https://developer.mozilla.org/en-US/docs/Web/API/Element
Reference for querySelector:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I have a little problem here, as jQuery seems to be 'too smart'.
In my HTML-code, I want to insert this string into a div-container:
</div><div class="something">
As you see, first is the closing-tag, second is the opening tag.
That is because I want to cut one big DIV into pieces.
I tried it with jQuery, which I prefer:
$(this).children('.abc').each(function(j){
if( (j+1) % 3 == 0){
$(this).after('</div><div class="abc">');
}
});
I am counting sub-containers and after each three containers I want to cut the parenting container.
Unfortunately jQuery ignores the </div> and puts a closing tag to the <div>. So the result is <div class="abc"></div>.
How do I tell jQuery to insert the string, that I want without any own semi-intelligent parsing?
If you want to cut one div into two, you may be better off replacing one with two rather than trying to be smart and inserting a closing </div> and an opening <div>.
$('.one').replaceWith('<div class="two">two</div><div class="three">three</div>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">I am one</div>
You can, of course, transfer any content to the new div's as appropriate.
Working Fiddle
Although what you're doing is logically correct, it is not always preferred in terms of implementation. You have to look around for certain ethos that are defined by library.
In case of jQuery that ethos is defined by the .wrapAll API.
You can try something like this.
If I understand your question correctly, what you're trying to do is convert
<div class="abc">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Into
<div class="abc">
<div class="something">
<div></div>
<div></div>
<div></div>
</div>
<div class="something">
<div></div>
<div></div>
<div></div>
</div>
</div>
Wrap it like
var divs = $("div.abc > div");
for(var i = 0; i < divs.length; i+=3) {
divs.slice(i, i+3).wrapAll("<div class='something'></div>");
}
I am not sure about this, but just try it like
$(this).children('.abc').each(function(j){
if( (j+1) % 3 == 0){
$(this).after('</div>');
$(this).after('<div class="abc">');
}
});
or vice versa
My HTML code structure like this
<div id="content">
<div> //start
<div id="title"></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div> //end
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
.....more div like above....
</div>
I want to use a piece of JQuery code to hide everything except the "div" has id="title"(keep the code from //start to //end).
Now, my JQuery code is:
$("div:not(:has(#title))").hide();
It shows "div id="title"""div"", but it also hide the several "div" after "div id="title"""div"". Again, I want to keep the code from //start to //end. Please help me, thanks.
If your goal is to hide the siblings of the div that contains the #title element, then:
$("#title").parent().siblings().hide();
$("#title") - find the element with the id "title"
.parent() - go up to its parent
.siblings() - get the siblings of the parent
.hide() - hide them
I have a group of nested divs
<div id="myDivs">
<div>
<div>
<div></div>
</div>
<div></div>
<div></div>
</div>
</div>
Using jquery, how do I select the div that is immediately beneathe myDivs, but NONE of it's children?
thnx!
Use the child selector: $('#myDivs > div')
Since the first element is an id selector, the following way will faster. But only noticed the difference in a very complex document.
$('#myDivs').find('div')