Develop Reference

Moving Div inside the loop in Jquery

I would like to move the bullets inside the Loop specifically under the Name.
I tried this one but not working.
(function($) {
var bullets = $(".elementor-main-swiper.swiper-container").find($('.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets'));
$('.elementor-testimonial').each(function() {
var _this = $(this),
target = _this.find('.elementor-testimonial__cite');
bullets.insertAfter(target);
alert(hello);
});
})(jQuery);
Please see here: https://drive.google.com/file/d/16X1-DgCA7gIi50zl7qlE0gL4E9hDeR5P/view?usp=sharing

You haven’t actually said what’s wrong with the code you’ve written, so I can only assume that your bullet points get added only to the last testimonial, not to all of them.
This is because when you append element A to element B, if element A already exists in the DOM, it will be moved rather than copied.
If you want to add the bullet points to each testimonial you’ll need to copy the bullet points using jQuery’s clone() method:
bullets.clone().insertAfter(target);

Select cloned element by data attribute using jQuery

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.

jQuery .clone .insertAfter with a new ID

How can I clone a DIV, append it right after the div and give it a new identifier?
I have a DIV with a class reflection, I want each instance of this DIV, cloned, and inserted right after the original, but with the class reflected (without the class, reflection) How can I accomplish this with jQuery?
Here's my current fiddle, but it doesn't work right... http://jsfiddle.net/yUgn9/

Pass a function to .after(), and have it return the updated clone.
$('div.reflection').after(function() {
return $(this).clone().toggleClass('reflection reflected');
});
DEMO: http://jsfiddle.net/PFBVX/
In older versions of jQuery, do this...
$('div.reflection').each(function() {
$(this).after($(this).clone().toggleClass('reflection reflected'));
});
DEMO: http://jsfiddle.net/PFBVX/1/

I believe you'll need to .each() of them to handle them individually. What the code is currently doing is grabbing all of them and cloning them after all of them. Instead, you want to handle each of them individually and insert the clone after the original, after changing the classes around as desired.
$(document).ready(function(){
$('div.reflection').each(function () {
var org = $(this),
clone = org.clone();
clone.removeClass('reflection').addClass('reflected')
.insertAfter(org);
});
});

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');

jQuery - How to link together a DOM element and a Javascript object?

I want to be able to link a javascript object with a dom element but cant find a way for this to be done properly. An example: say when opening a page with an inventory it loads all the items contained in it and when I hover over the images inside it creates a small tooltip with some information. Well there will be much of these items on the page and i want to be able to link the DOM element with an object so i can access its properties easily. I hope im explaining my self properly.
say I had this inside an inventory:
<div id="slot1"><img id="item1"></div>
<div id="slot2"><img id="item2"></div>
and say i have a javascript object called slot1 and slot2:
the object slot1 has all the properties that need to be shown in the tooltip so i would like to do something like this in the mouseover event:
this.showTooltip()
any help would be great ty if i need to explain it better just say!
-Thaiscorpion

Use jQuery data:
$("div.hasToolTip").hover(
function() {
//Get the associated data with the DOM element
//with $(this).data(someKey)
showToolTip($(this).data('toolTipInformation'));
},
function() {
//Here you can hide all tooltips
}
);
Obviously, before you can register this event, you have to assign the object to every DOM element with $(selector).data(key, value).
These example expects that every DOM element which should have a tooltip has a class named .hasToolTip.
Look at the jQuery documentation for more information about the .data() function.

Just have the javascript object know the ID of the object it's watching.
function Tooltipper(divID) {
this.id = divID;
}
Tooltipper.prototype.showTooltip = function () {
// do tooltip stuff
$('#' + this.id).tooltip(); // assuming that it has a tooltip thing
};
var slot1 = new Tooltipper('slot1'),
slot2 = new Tooltipper('slot2');
And then:
slot1.showTooltip();
Or better yet, instead of passing in the ID, pass in the object:
var slot1 = new Tooltipper($('#slot1'));
This way you don't have to do a DOM lookup each time.