Assuming the following:
<div class="a"> <!-- select -->
<div class="b">
<div class="a"> <!-- skip -->
</div>
</div>
</div>
<div class="b">
<div class="a"> <!-- select -->
<div class="b">
<div class="a"> <!-- skip -->
</div>
</div>
</div>
</div>
<div class="a"> <!-- select -->
</div>
How do I only select the outermost $('.a') elements?
Edit: A helpful JSFiddle, in this example, only 'a' should be selected, not 'a!'.
This is where filter methods come in handy:
$('.a').not('.a .a');
This excludes any .a that is nested within another .a so you only get the outermost ones, regardless of whether the outermost ones are themselves nested within other elements.
Try using the jQuery :not selector
$('.a:not(.a .a)')
http://jsfiddle.net/7E7Mk/1/
Try
var a = $('.a'), not = a.find('.a');
a.not(not);
selector profiling
Related
Could anyone please explain why for the given HTML
<body>
<div id="ustack1">
Block 1:
<div id="0"> 0 </div>
<div id="1"> 1 </div>
<div id="2"> 2 </div>
<div id="3"> 3 </div>
<div id="4"> 4 </div>
<div id="5"> 5 </div>
<div id="6"> 6 </div>
<div id="7"> 7 </div>
<div id="8"> 8 </div>
<div id="9"> 9 </div>
<div id="10"> 10 </div>
</div>
<div id="stagingDiv" style="display:inline-block;">
Block 2:
</div>
</body>
And the corresponding javascript
var cards = document.getElementById("ustack1").children;
for(i=0;i<cards.length;i++){
document.getElementById("stagingDiv").appendChild(cards[i]);
}
(As seen in this jsfiddle: https://jsfiddle.net/73oszkj9/ )
that the odd elements are being skipped over?
cards is a live HTMLCollection. When you perform the appendChild, you're moving the node to another place in the DOM, which removes it from the collection. One solution is to just iterate over cards until its length is zero:
while(cards.length > 0){
document.getElementById("stagingDiv").appendChild(cards[0]);
}
Here's an updated fiddle: https://jsfiddle.net/Lkvdep52/
If it makes you feel any better, this is a mistake that many of us have made at one time or another ;-) Using the browser debugger is a good way to understand the underlying cause for problems like this.
When you use pure appendChil you are cutting the exact element from its parent. Add cloneNode to make a copy of that elements:
var cards = document.getElementById("ustack1").children;
for(i=0;i<cards.length;i++){
document.getElementById("stagingDiv").appendChild(cards[i].cloneNode(true));
}
At the end you can remove children of first parent if needed.
I have:
<div class="stuff">
<div class="removeme">
<div class="iamfree">
iamfree
<div class="removeme">
<div class="ishouldbefreetoo">
ishouldbefreetoo
</div>
</div>
</div>
</div>
</div>
I want:
<div class="stuff">
<div class="iamfree">
iamfree
<div class="ishouldbefreetoo">
ishouldbefreetoo
</div>
</div>
</div>
Tried the unwrap() function from jQuery here: http://jsfiddle.net/adyz/7d947wja/
Also, cloned elements act strange with unwrap.
You need to call the unwrap() on the contents of the elements to be removed.
$('.removeme').contents().unwrap()
Demo: Fiddle
Remove the parents of the set of matched elements from the DOM,
leaving the matched elements in their place.
How do I move the contents of a div to the contents of another div?
I want to move .sidebar from .post to .carousel. How to do it by using javascript?
I want to go from this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
to this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post"></div>
<div class="sidebar"></div>
</div>
</div>
</div>
document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);
I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode):
$('.sidebar').each(function(){
$(this).insertAfter(this.parentNode);
});
JS Fiddle demo.
References:
each().
insertAfter().
Assuming you only have only one such occurrence, you can use plain JavaScript:
var sidebar = document.getElementsByClassName('sidebar')[0];
// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);
The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.
Try to use JQuery Draggable() and Droppable() functions.
See the Demo...
Droppable | JQuery UI
Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.
$('#main_content .img-wrapper').empty().append($(this).find('img').clone());
This one takes an image from one div and copies it to another with the class="img-wrapper"
I want to do exactly the same but with text. I tried this
$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());
where ('.info') is the class name of the div I want to copy. Its not working.
I don't fully understand the syntax as this is my first day using javascript. Please can someone explain where I'm going wrong?
This is the HTML - There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div
<div class="row">
<div class="card-container">
<div class="card">
<div class="back">
<img src="images1.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#cc99cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images2.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#9966cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images3.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#6666cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images4.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#3366cc;"></div>
</div>
</div>
This is the main content div
<div id="main_content">
<!-- main content -->
<div class="img-wrapper">
</div>
<div class="text-wrapper">
</div>
</div>
The javascript in question is using jQuery.
$('#main_content .img-wrapper')
returns the element(s) with class 'img-wrapper' inside the element with id 'main_content'
.empty()
empties this element (removes all it's HTML contents)
.append(
inserts the argument (the bit that comes next) into this element
$(this).find('img')
finds all 'img' tags within the element referred to by this (i.e. if this was triggered from a .click() handler then the element that was clicked)
.clone()
clones these elements so that there are two versions - one in their original location and one being inserted into the #main_content img-wrapper element.
);
Do you definitely have a #main_content .text-wrapper element?
Without seeing the html structure, my guess would be the context in which you're trying to find .info is incorrect.
I'm assuming this block of code is within an event handler like a click or mouseover or something. In that case the $(this) is referring to the element that triggered that event. So the following snippet:
$(this).find('.info')
is looking for elements with a classname of info within the element referred to by $(this).
Make sure the context is correct - change $(this) to the element that you need to search within.
Try this:
$('#main_content .text-wrapper').empty().append($(this).find('.info').html());
I have HTML like this:
<div>
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>
and I want to get rid of the div's of class="a" but leave their content. My initial attempt was:
$("div.a").replaceWith($(this).html());
However this is undefined. How would you do this?
try
$("div.a").each(function(){
$(this).replaceWith($(this).html());
});
Replacing elements with their stringified HTML content will nuke any event handlers that might be in place. This won't:
$("div.a").each(function () {
$(this).replaceWith($(this.childNodes));
});
In jQuery you could also use contents and unwrap.
$(".parent").find(".a").contents().unwrap();
<div class="parent">
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>