Can't change .html() - javascript

I have a simple html (see here: http://plnkr.co/edit/nqfLNfYxV2B8AwsDAcNu?p=preview):
<section class="divs">
<div>div1
<div>div1.1.
<div>div1.1.1</div>
<div>div1.1.2</div>
</div>
<div>div1.2.</div>
</div>
<div>div2</div>
</section>
I want go through all section div:first-child elements and add some mark to see if it belongs to that selector. In order to implement this there is following code:
$(function(){
$('section div:first-child').each(function(index,element){
console.log('element.html before: '+$(element).html());
var elementHTML = '['+index+']: '+$(element).html();
$(element).html(elementHTML);
console.log('element.html after: '+$(element).html());
});
});
But it adds the [index] to the element's html only for the first selector.
Can anybody explain why?
UPD
Not quite the answer, but nevertheless, Pete gave me the understanding of the problem.
So in order to make it working there is necessary to change
$(element).html(elementHTML);
to
$('section div:first-child')
.eq(index).html(elementHTML);
It's not about efficiency ofcourse, it's about how to solve the problem in place. The real solution, no doubt, is to use .prepend() method.

Your problem is the first time instance of section div:first-child is the top level div (div1) so when you replace the html of this div, the divs 2 and 3 in the loop no longer exist in the dom and so they don't get updated as such
Instead of replacing the html, just prepend the text:
$('section div:first-child').each(function(index, element) {
$(element).prepend('[' + index + ']: ');
});
New plunker

$('section div:first-child')
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child
The :first-child CSS pseudo-class represents any element that is the
first child element of its parent.
If you want to select only the divs one level below section, you can try:
$('section > div')

Since you replace the HTML every time, the elements are replaced on the fly. To avoid that, don't replace the entire HTML, just $.prepend() to it. Try it:
$(function() {
$('section div:first-child').each(function(index, element) {
console.log('element.html before: ' + $(element).html());
var elementHTML = '[' + index + ']: ';
$(element).prepend(elementHTML); // <------------------------ HERE !
console.log('element.html after: ' + $(element).html());
});
});
body * { box-sizing: border-box; }
div { background-color: white; }
section div { border: solid 2px #888; margin: 4px; padding: 10px; }
section div:first-child { background-color: lightcyan; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<section class="divs">
<div>div1
<div>div1.1.
<div>div1.1.1</div>
<div>div1.1.2</div>
</div>
<div>div1.2.</div>
</div>
<div>div2</div>
</section>

When you set the html, the elements below it don't get updated, they get replaced
Your code works, it's just updating the elements that are no longer attached to the DOM.

Related

Cannot get last child of div

I am trying to get the last child of a <div> but I am failing. Here is the code that I use for it but it always returns undefined.
$('#output:last-child').attr('class');
What is wrong? How can I fix it?
This is supposed to be the last element:
<div class='hisout ${hisclass}'><p class="he">` + message + '</p></div>
Use the child combinator selector:
$('#output > :last-child').attr('class');
Edit: Added example
#output > :last-child {
height: 20px;
width: 20px;
background: red;
border: 1px solid green;
}
<div id="output">
<div>....</div>
<div>....</div>
<div>....</div>
</div>
Your selector is retrieving the #output element that is the last child of its parent.
From the description it sounds like you want to find the last child within #output, as such you need to separate the selectors:
$('#output div:last-child').attr('class');
You can try with the children() and last() functions:
$('#output').children().last().attr('class')
To specifically filter a type of child, you can specify the type in the children() call:
...children('div')...
Using a selector may be faster, though.

JQuery: create corresponding elements with same custom attrs

Fiddle here: http://jsfiddle.net/yv1vLhd9/
For whatever reasons, suppose I want to replace three dom elements with three others using JQuery, but I want to transfer one or more data attributes from the first elements onto their corresponding replacements.
Given the following HTML:
<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>
And the following CSS:
div {
width: 100px;
height: 100px;
}
div:before {
content: attr(data-custom);
}
.original {
border: blue solid 1px;
}
.new {
border: pink solid 1px;
}
How can I make sure there is a new element with each of the custom data attributes?
For example:
$(document).ready( function(){
var $originalEl = $('.original')
var originalData = $originalEl.data('custom')
var replacement = '<div class="new" data-custom="' + originalData + '"></div>'
$originalEl.after(replacement).hide()
});
But this creates three new data-custom="dog" attributes.
You must use $.each for the element.
Starting after you declare $originalEl
$originalEl.each(function(){
// code here
})
Here is your code updated http://jsfiddle.net/yv1vLhd9/4/
http://jsfiddle.net/VixedS/wz95hh3r/1/
$(document).ready(function(){
$('.original').each(function(){
$(this).hide().clone().attr('class','new').show().appendTo('body');
})
});
jQuery provides a host of DOM manipulation methods that will help you achieve the desired input. As noted by some of the other answers, you'll need to traverse over the set of matched elements using $.each. In addition, rather than creating new elements from strings, you can use the .clone() method to:
clone the existing element
modify your new element
insert it after the original element
traverse to the original element
and finally hide the original element.
$(function () {
$('.original').each(function (idx, elem) {
$(elem)
.clone()
.removeClass('original')
.addClass('new')
.insertAfter($(elem))
.prev()
.hide();
});
});
div {
width: 100px;
height: 100px;
}
div:before {
content: attr(data-custom);
}
.original {
border: blue solid 1px;
}
.new {
border: pink solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>
API Method References:
jQuery.each()
.clone()
.removeClass()
.addClass()
.insertAfter()
.prev()
.hide()

Apply JQuery to div's clicked

I am working on making a number list with each number on its individual div. So far I am able to remove the div with Javascript (on click), but I would like to enable JQuery so that I am able to add a class to a div and then remove all divs of that class with a button or something like that.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>
<style>
.divContainer {
width: 35px;
height: 25px;
border: solid 1px #c0c0c0;
background-color: #e1e1e1;
font-family: verdana;
float: left;
}
.text {
font-size: 15px;
font-family: verdana;
color: black;
margin-top: 4px;
}
h4 {
font-family: Verdana;
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<h4>Double click para borrar un numero</h4>
<script type="text/javascript">
for(var i = 1; i <= 639; i++){
var divTag = document.createElement("div");
divTag.id = i;
divTag.className = "divContainer";
document.body.appendChild(divTag);
divTag.ondblclick = function(){this.parentNode.removeChild(this)};
var pTg = document.createElement("p");
pTg.setAttribute("align", "center");
pTg.className = "text";
pTg.innerHTML = (i);
document.getElementById(i).appendChild(pTg);
}
</script>
</body>
</html>
http://jsfiddle.net/ramonfabrega/AZSy8/
For simplicity, I just tried hiding the div's clicked, but JQuery does not seem to work. So something must be off.
Two issues:
1) jQuery wasn't loaded.
2) You were trying to bind the click event on an invalid selector (divTag instead of div)
Here's an updated fiddle: http://jsfiddle.net/LFC3A/2/
Regarding #2 - jQuery allows you to select an element multiple ways. The most common is to use a selector. The majority of selectors jQuery supports are from CSS 1 - 3, though jQuery supports some of its own custom selectors (such as div:eq, div:gt, and so on...) Check out the selectors page here: http://api.jquery.com/category/selectors/
Now, if your markup was:
<body>
<divTag>My Custom Div Tag</divTag>
<div>My regular DIV</div>
</body>
Then your original fiddle would have worked. In fact, here's an updated fiddle demonstrating that: http://jsfiddle.net/FpMAw/ (I updated your createElement to return a custom element, divTag)
The other way of accessing jQuery is by passing it a DOM element. Something like:
var $body = $(document.body) is equivalent to var $body = $('body')
If you reference that, you now have a jQuery object with a bunch of useful helper methods. So, in our previous example, we can now do:
$body.css('color', 'red')
Hopefully this helps explain a bit more why it didn't work. If you have any other questions, feel free to ask :)
Fiddle Demo
you are not including jQuery library in the fiddle
change $('divTag') to $('div')
Read $( "element" )
$(document).ready(function () {
$('div').click(function () {
$(this).hide();
});
});
Start Learning
jQuery API Documentation
This will create and add a click handler at the same time.
$('<div>').click(function(e){ this.addClass('active');})

Jquery text toggle

I am trying to make a jquery text toggle. If you rollover the element, the text appears next to it and vice versa, it dissappears when you leave the element area.
My code does not work yet. Also, i would like to include different texts for different links. If there is a simpler way please suggest.
HTML
<div id="container"></div>
clickclickclick
JS
$("#ovr").mouseenter(function() {
$(#container).html("wazaap");
}).mouseleave(function() {
$(#container).html();
});
You are forgetting the quotes in the jQuery selector:
$("#ovr").mouseenter(function() {
$("#container").html("wazaap");
}).mouseleave(function() {
$("#container").html("");
});
Edit
If you want different sentences, you can do this:
JS
var description=new Array();
description["one"]="Here comes the first";
description["two"]="And here the second";
description["three"]="Now let's have the third";
description["four"]="Finally the last one, fourth";
$("a.link").mouseenter(function(){
$("span#description").text(description[$(this).attr("id")]);
}).mouseleave(function(){
$("span#description").text("");
})​
HTML
one
two
three
four
<span id="description"></span>​
Check working here
http://jsfiddle.net/Wpe2B/
Try to do it with hover() function. Code will be cleaner.
Basic example:
jQuery:
$("#container").hover(
function() {
$('.cText').text("click");
},
function() {
$('.cText').text("");
});
CSS:
#container {
position: relative;
background-color: #EEEEEE;
width: 100px;
height: 100px;
position: relative;
display: block;
}
HTML:
div id="container"></div><span class="cText"></span>
Regards
Update
Base on OP's comments wanting to use several links to show text I tried this:
http://jsfiddle.net/cZCRh/4/
It doesn't quite work with a class because all links get the same text
This works http://jsfiddle.net/cZCRh/1/
<div id="container"></div>
clickclickclick
$("#ovr").mouseenter(function() {
$('#container").html("wazaap");
}).mouseleave(function() {
$("#container").html("");
});
​
The problem was the mouseleave was in the wrong place as well as missing quotes around the element IDs

How to move an element into another element

I would like to move one DIV element inside another. For example, I want to move this (including all children):
<div id="source">
...
</div>
into this:
<div id="destination">
...
</div>
so that I have this:
<div id="destination">
<div id="source">
...
</div>
</div>
You may want to use the appendTo function (which adds to the end of the element):
$("#source").appendTo("#destination");
Alternatively you could use the prependTo function (which adds to the beginning of the element):
$("#source").prependTo("#destination");
Example:
$("#appendTo").click(function() {
$("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
$("#moveMeIntoMain").prependTo($("#main"));
});
#main {
border: 2px solid blue;
min-height: 100px;
}
.moveMeIntoMain {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>
<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>
My solution:
Move:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
copy:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
Note the usage of .detach(). When copying, be careful that you are not duplicating IDs.
Use a vanilla JavaScript solution:
// Declare a fragment:
var fragment = document.createDocumentFragment();
// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));
// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);
Check it out.
Try plain JavaScript: destination.appendChild(source);.
onclick = function(){ destination.appendChild(source) };
div {
margin: .1em;
}
#destination {
border: solid 1px red;
}
#source {
border: solid 1px gray;
}
<div id=destination>
###
</div>
<div id=source>
***
</div>
I just used:
$('#source').prependTo('#destination');
Which I grabbed from here.
If the div where you want to put your element has content inside, and you want the element to show after the main content:
$("#destination").append($("#source"));
If the div where you want to put your element has content inside, and you want to show the element before the main content:
$("#destination").prepend($("#source"));
If the div where you want to put your element is empty, or you want to replace it entirely:
$("#element").html('<div id="source">...</div>');
If you want to duplicate an element before any of the above:
$("#destination").append($("#source").clone());
// etc.
You can use:
To insert after,
jQuery("#source").insertAfter("#destination");
To insert inside another element,
jQuery("#source").appendTo("#destination");
You can use the following code to move the source to the destination:
jQuery("#source")
.detach()
.appendTo('#destination');
Try the working CodePen.
function move() {
jQuery("#source")
.detach()
.appendTo('#destination');
}
#source{
background-color: red;
color: #ffffff;
display: inline-block;
padding: 35px;
}
#destination{
background-color:blue;
color: #ffffff;
display: inline-block;
padding: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>
<div id="destination">
I am destination
</div>
<button onclick="move();">Move</button>
If you want a quick demo and more details about how you move elements, try this link:
http://html-tuts.com/move-div-in-another-div-with-jquery
Here is a short example:
To move ABOVE an element:
$('.whatToMove').insertBefore('.whereToMove');
To move AFTER an element:
$('.whatToMove').insertAfter('.whereToMove');
To move inside an element, ABOVE ALL elements inside that container:
$('.whatToMove').prependTo('.whereToMove');
To move inside an element, AFTER ALL elements inside that container:
$('.whatToMove').appendTo('.whereToMove');
I need to move content from one container to another including all the event listeners. jQuery doesn't have a way to do it, but the standard DOM function appendChild does.
// Assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);
Using appendChild removes the .source* and places it into target including its event listeners: Node.appendChild() (MDN)
You may also try:
$("#destination").html($("#source"))
But this will completely overwrite anything you have in #destination.
You can use pure JavaScript, using appendChild() method...
The appendChild() method appends a node as the last child of a node.
Tip: If you want to create a new paragraph, with text, remember to
create the text as a Text node which you append to the paragraph, then
append the paragraph to the document.
You can also use this method to move an element from one element to
another.
Tip: Use the insertBefore() method to insert a new child node before a
specified, existing, child node.
So you can do that to do the job, this is what I created for you, using appendChild(), run and see how it works for your case:
function appendIt() {
var source = document.getElementById("source");
document.getElementById("destination").appendChild(source);
}
#source {
color: white;
background: green;
padding: 4px 8px;
}
#destination {
color: white;
background: red;
padding: 4px 8px;
}
button {
margin-top: 20px;
}
<div id="source">
<p>Source</p>
</div>
<div id="destination">
<p>Destination</p>
</div>
<button onclick="appendIt()">Move Element</button>
I noticed huge memory leak & performance difference between insertAfter & after or insertBefore & before .. If you have tons of DOM elements, or you need to use after() or before() inside a MouseMove event, the browser memory will probably increase and next operations will run really slow.
The solution I've just experienced is to use inserBefore instead before() and insertAfter instead after().
Dirty size improvement of Bekim Bacaj's answer:
div { border: 1px solid ; margin: 5px }
<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>
For the sake of completeness, there is another approach wrap() or wrapAll() mentioned in this article. So the OP's question could possibly be solved by this (that is, assuming the <div id="destination" /> does not yet exist, the following approach will create such a wrapper from scratch - the OP was not clear about whether the wrapper already exists or not):
$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')
It sounds promising. However, when I was trying to do $("[id^=row]").wrapAll("<fieldset></fieldset>") on multiple nested structure like this:
<div id="row1">
<label>Name</label>
<input ...>
</div>
It correctly wraps those <div>...</div> and <input>...</input> BUT SOMEHOW LEAVES OUT the <label>...</label>. So I ended up use the explicit $("row1").append("#a_predefined_fieldset") instead. So, YMMV.
The .appendChild does precisely that - basically a cut& paste.
It moves the selected element and all of its child nodes.

Categories

Resources