Select cloned element by data attribute using jQuery - javascript

So I have cloned an element and added some data to it. Now I need to select that cloned element by its data attribute. The problem is that I can't find, select that cloned element based on data attribute. Any ideas?
Here is the fiddle http://jsfiddle.net/fjckls/hho6k86a/
This doesn't work:
var clone = $(".clone").clone(true);
clone.html("this is clone")
clone.data("info", "this-is-clone");
$(".clone-holder").append(clone);
// nothing is selected
var cloned = clone.find("[data-info='this-is-clone']");
cloned.css("color", "red")
#fjckls it's just a work-around by using attribute instead of data, it
does not explain why your code does not work. This kind of answer of
course won't help community much. – King King
I have accepted #Hendra Lim answer for the moment - and I understand its kind of a workaround - not using data attribute but instead creating new custom attribute. If someone has a "proper" solution of using data in my scenario then I would reconsider the accepted answer. For the time being it works so I'll leave where it is.

try this :
var clone = $(".clone").clone(true);
clone.html("this is clone")
clone.attr("info", "this-is-clone");
$(".clone-holder").append(clone);
var cloned = $(".clone-holder").find("[info='this-is-clone']");
cloned.css("color", "red")
here is the working example here
what u do wrong, is u try to find cloned element inside ".clone" element, instead u have to find cloned element in ".clone-holder" element coz u append ur clone element there. and replace clone.data to clone.attr.

Related

having trouble deleting specific html element with javascript

I'm having trouble deleting the specific element that the delete button is for, instead it deletes the last in the array, or the first with my previous code, any help is greatly appreciated. Vanilla js.
Codepen: https://codepen.io/Adrw4/pen/LzvjLj
idNum--;
console.log(idNum);
console.log(array);
var node = document.getElementById(idNum);
node.parentNode.removeChild(node);
Instead of relying on the ID of the elements, just pass in the event to the deleteTodoItem function on click event. Based on the knowledge of the DOM, you can find out the related li element and delete it.
function deleteTodoItem(event) {
var node = event.target.parentNode;
node.parentNode.removeChild(node);
};
Here's the updated codepen:
https://codepen.io/Nisargshah02/pen/OxGjOr?editors=1010

Get last added element of an element

I have a pivot element and I want that whenever an element is added to this pivot element a javascript function is called on it. The call must happen exact once per element.
DOMNodeInserted is marked as deprecated so I tried to use the workaround found here. The approach is working fine, but in addition to the element to which the addition happended (event.target), I also need to know which element was added.
Do I have to keep record of all elements added to my pivot element and then compare them after the event happened to detect new elements or is there an easier approach?
If your variable references a node, to retrieve the last item added to it you can use the lastChild property.
var node = document.getElementById("something");
var last = node.lastChild;
last.appendChild(document.createTextNode("I'm the last one..."));
An alternative may be childNodes:
var node = document.getElementById("something");
node.childNodes[node.childNodes.length - 1].appendChild(document.createTextNode("I'm the last one..."));
For extra reference: https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild
and https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

$.each only affects the first element?

Looping through all the elements of the class, I see the code below only affecting the first element in the array yet the console log logs every one of them.
del = $('<img class="ui-hintAdmin-delete" src="/images/close.png"/>')
$('.ui-hint').each(function(){
console.log($(this));
if ($(this + ':has(.ui-hintAdmin-delete)').length == 0) {
$(this).append(del);
}
});
The elements are all very simple divs with only text inside them. They all do not have the element of the class i am looking for in my if statement, double checked that. Tried altering the statement (using has(), using children(), etc). Guess i'm missing something very simple here, haha.
Will apperciate input.
I think what you need is (also if del should be a string, if it is a dom element reference then you need to clone it before appending)
$('.ui-hint').not(':has(.ui-hintAdmin-delete)').append(function(){
//you need to clone del else the same dom reference will be moved around instead of adding new elements to each hint
return del.clone()
});
You can do this:
$('.ui-hint:not(:has(.ui-hintAdmin-delete))').append(del);
without even using the each loop here. As jquery code will internally loop through all the descendant of the ui-hint class element and append the del element only to the descendant not having any .ui-hintAdmin-delete elements.
While it would probably help to see your HTML as well, try changing your conditional to
if (!$(this).hasClass('ui-hintAdmin-delete')) {
$(this).append(del);
}

When I clone a draggable div, why isn't the clone draggable?

I am trying to make a cloned div draggable :
$("div").clone(true).removeAttr("id").appendTo($("body")).draggable();
I've also tried this:
$("div").clone(true,true).removeAttr("id").appendTo($("body")).draggable();
It creates a clone but that clone is not draggable. Can anybody tell me why this is not working?
Here you go. You don't want to clone(true). Just clone(). The former will clone the draggable event as well, which is why it has that weird behaviour.
Here is an example: http://jsfiddle.net/byZXS/1/
$('div').draggable();
$('div').clone().appendTo('body').draggable();​
How to preserve the data:
var data = $('div').data();
var newDiv = $("div").clone().appendTo('body').draggable();
newDiv.data(data);
Example here: http://jsfiddle.net/byZXS/2/
Why not we first destroy the orignal elements draggale and resizable plugins like :
$("#orignaldivid").draggable("destroy");
$("#orignaldivid").resizable("destroy");
Then make a clone like :
var clone = $("orignaldivid").clone(true).attr("id", GetNewId()); //GetNewId may be any function to generate unique id
Then append it to the #orignaldiv parent like :
$(clone).appendTo($("#orignaldivid").parent());
And finally re-assign to orignal and assign to clone all plugins
$("#orignaldivid").draggable();
$("#orignaldivid").resizable();
$(clone).draggable();
$(clone).resizable();
May be helpful !

Adding and finding classes that is dynamically added to body - jquery

Is there any way to add classes or alter objects that is dynamically added to the body?
I am adding a range of objects to the body by javascript.
Fot instance Im adding some links that is dynamically generated and added to the body. When they are loaded I need to elect the first of the divs and add a new class to it.
I can't seem to find any way to do this... Update the DOM or how should I go around this? There must be a way to alter dynamically added objects.
Any clues?
Thanks for any help!
if you added them dynamically, then you can just use the objects you already have. Otherwise you'll need to find them with sizzle.
//create the elements
var $link1 = $('<a>click me</a>').attr('href','page1.html');
var $link2 = $('<a>click me</a>').attr('href','page2.html');
//append the elements
$('#some-links').append($link1).append($link2);
//use the element we created
$link1.addClass('my-class');
//find the second link element using sizzle
$('#some-links>a').eq(1).addClass('my-other-class');
demo: http://jsfiddle.net/PtebM/2/
Well of course you caN:
var a = $('<a>');
a.html('new link').appendTo('#menu');
a.addClass('border');
or
var a = $('<a>');
a.html('new link').appendTo('#menu');
$('#menu a').addClass('border');
fiddle http://jsfiddle.net/4NPqH/
Why not just add a class name to your generated elements?.
I.e.:
$('span').html('Hello world').addClass("fancyText").appendTo('body');

Categories

Resources