Is it possible to create a clone/copy of a DOM element in jQuery without cloning its content? I need to split the content of a div into two separate divs with the same attributes. So for example I need to change:
<div class="someclass" someattr="someval">
this is the first sentence. this is the second sentence.
</div>
into something like:
<div class="someclass" someattr="someval">
this is the first sentence.
</div>
<div class="someclass" someattr="someval">
this is the second sentence.
</div>
How exactly the content is split is rather complicated, but this is basically what I need to do. Obviously, creating a clone without content can be achieved using:
$(el).clone().empty();
But since my element can become rather large, I would like to get rid of the overhead of unnecessarily cloning the element content. Ideas? Thanks!
Just go around jQuery for this operation, as long as you don't need to keep (non-attribute-based) event listeners or other data.
var $clone = $(el.cloneNode(false));
Related
<div class="col-1-3">
<div class="click"></div>
</div>
<div class="col-1-3">
</div>
<div class="col-1-2">
</div>
Using jQuery, I need to select the col-1-2 div when a user clicks on the "click" div. I need to replace col-1-2 with col-1-3. So far, I have tried a variety of methods using parent();, next();, find(); etc. etc. Right now, I looking into:
$(".click").parent().next(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
That obviously doesn't work but I am not sure where to go from here.
next will only look at the immediate next element. You need to use nextAll to test all the following siblings.
Using this instead of a selector will make sure that you are dealing with the div that was actually clicked rather than another one with the same class name.
$(this).parent().nextAll(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
You may also wish to filter the results to apply the change to only the first match.
One more slightly shorter version:
$(this).parent().siblings(".col-1-2").toggleClass("col-1-2 col-1-3");
$.fn.toggleClass can be used instead or combination of removeClass + addClass: col-1-2 will be removed and col-1-3 will be added.
I am new to JavaScript so forgive me if the question comes around as dumb.
I know that appendChild() allows me to add a child element to an existing element. However, the problem is that I want to add an element which has an image on the left and a series of text boxes on the right and I need to add it over and over again on button click.
Adding simple elements like p, a , etc can be done by a single call to appendChild(), however for the above scenario, it will be a little messy.
Is there some way that I can define the custom element that I want to append and then just add it with a single call to appendChild()
Are you using jQuery? If it is a really complicated template, you could use .load() to ajax in an template and populate it with whatever you have to. You wouldn't need to dynamically create all of the elements using javascript, only populate it. This would would also allow you to change your template if need be very easily.
It seems you need cloneNode:
target.appendChild(template.cloneNode(true)); // If you want to clone template
// with all its descendants
target.appendChild(template.cloneNode(false)); // If you want to clone template
// without its descendants
I do this quite a bit. My code generally looks like this:
<div class="template" style="display: none;">stuff</div>
then:
$('.template').clone(true).removeClass('template').show().appendTo(someElement);
Since you're not using jQuery, have a look at the clone function here:
http://code.jquery.com/jquery-1.11.0.js
(search for "clone: function" to find it)
You can steal the relevant bits if you can't actually use jQuery itself.
I want to animate two jquery OBJECTS at the same time (using the jquery slideUp method)
I have two divs that have already been 'cached' into a variable like so:
var div1 = $('body').find('#someId');
var div2 = $('body').find('#someOtherId');
I have cached these because they take a considerable amount of processing to find due to the page layout (using framesets and frames...don't ask).
Anyway,
If I do the slide animation like below, they are not in perfect sync (they are lined up so you can easily see it visually)
div1.slideUp(500);
div2.slideUp(500);
So I tried wrapping it like so,
$(div1, div2).slideUp(500);
but only div1 slides.
Is there anyway to get this to work while still maintaining the cached objects?
Edit: Giving the div's a class name does not trigger the animation. I think it may have something to do with the fact that I'm using framesets. The jquery code is in the top frame and so it will not look into other frames for the class. That is why I cached the objects
You can do what you want like this:
div1.add(div2).slideUp(500);
I made a quick jsfiddle you can check out here.
The shortest thing to do is to use a shared class and then select all the items with that class:
$('.willAnimate').slideUp(500);
<div id="element1" class="willAnimate"></div>
...
<div id="other-element" class="willAnimate"></div>
Otherwise, you could use the .add() method http://api.jquery.com/add/
In this case your code will become something like this:
div1.add(div2).slideUp(500);
why you dont add a class to the to div and add do the selector like this
<div id="someId" class="example"> </div>
<div id="simeOtherId" class="example"> </div>
the selector that add the animation it's like this
$(".example").slideUp(500);
and that avoid to find some variables and make more selectors
Give the two divs the same class, i.e. slide and then change your code to $('.slide').slideUp(500).
$('.yourclass').slideUp(500);
<div id="someId" class="yourclass"></div>
<div id="simeOtherId" class="yourclass"></div>
Theres a way using javascript function to automatically put div tags in all images?
Example:
<div class="example"><img src="..."></div>
I know you didn’t ask for a jQuery-specific solution, but if using jQuery is an option, there’s a pretty easy answer — you can use .wrap():
$('img').wrap('<div class="example" />');
This will wrap all images in a div with class="example".
Of course, this is possible in plain JavaScript as well; loop through all img elements, and for every node, clone it, create a new div, append the clone to it, insert the div into the DOM before or after the original img element, and finally remove the original img element from the DOM.
I am using JavaScript to generate a map for a game, and each tile is a separate div. In order to be able to position the map on my site, I am throwing them all in another div.
So for example:
<div id="mapBox">
<div id="tile" ... ></div>
<div id="tile" ... ></div>
</div>
The #tile divs are generated from data in an XML file, so they're dynamically generated. On each #tile, I have an onmouseevent that triggers a function (alert(1) for now just to get it to work) but it never seems to be triggered.
If I put an onmouseevent on #mapBox it triggers it, but I can't get it to work for the #tile divs.
Any help with this would be appreciated.
Not sure how you're selecting the #tile divs, but it is not valid to have multiple elements with the same ID.
Selection using duplicate IDs will often give you only the first match (or some other unpredictable behavior).
When a duplicate identifier is needed, you should use a class instead of an ID.
<div id="mapBox">
<div class="tile" ... ></div>
<div class="tile" ... ></div>
</div>
First problem, as mentioned, is that you use the same id for many elements, so the event only fires on the first one.
Secondly you should use the .delegate() method on the #mapBox after giving a class on the tiles like this
$('#mapBox').delegate('.tile', 'mouseover', function(e){
//do whatever here
})
example at http://jsfiddle.net/nXa27/1/
Update
Sorry, didn't see you were not talking about jquery..
Here is an example with pure javascript http://www.jsfiddle.net/AvJf7/
Still you will need to add a tile class to your tiles for easy and valid selecting.