Currently i have this (in a function):
$('#Ligne' + Ligne_Doublons).remove(); //Remove the Div
$('#Panier').append('<div id=\'Ligne' + Ligne_Doublons + '\'><div class="ABC">' + Qte + '</div><div class="ABC">' + Nom + '</div></div>'); //Add de New Div
Example :
I have 3 div :
<div 1>
<div 2>
<div 3>
After the function who change the "div 2", the code make this:
<div 1>
<div 3>
<New div 2>
But i want this :
<div 1>
<New div 2>
<div 3>
Do you know how i can make this?
Thanks ;)
http://api.jquery.com/replaceWith/
$('#Ligne' + Ligne_Doublons)
.replaceWith('<div id=\'Ligne' + Ligne_Doublons + '\'><div class="ABC">' + Qte + '</div><div class="ABC">' + Nom + '</div></div>')
You need to use the after() method:
$('selector_to_div_1').after('div_2');
I think you need to replace div 2 with another one.
Let's say you have the following HTML code
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
Then the jQuery code should be as following:
$('element-2').replaceWith($('<div class="new-element-2"></div>');
Hope that helps.
If you want to preserve the contents and data/events attached to the contents then try
$('#d2').replaceWith(function(){
return $('<div />').append($(this).contents())
})
Demo: Fiddle
I think that the problem is you're removing a div, then trying to append a new div after the one you've just removed.
Therefore, if you append the new div to the old one, then remove the old one it should be in the right place.
Related
So basically I have some elements with some data-values in a file . I want to dynamically create links to them using those data-values to type the text, href etc.
For example, I have two divs, id'ed firstand second. They have importance values, respectively "most important" and "least important".
I want to create two links to them, with the phrase "This is a link to the most/least important div" using JavaScript/jQuery. Below is a non-working example.
File a.html (ommiting headings and such, ofc):
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
File b.html:
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>
$(`.makelink`).each( function(){
var target = $(this).data('linkto');
$(this).attr('href','b.html#' + target);
var imp = $('b.html #' + target).data('importance');
$(this).html('Link to the ' + imp + ' div');
});
However nothing happens. Any help is appreciated.
Your code seems correct except the selector should be inside quote and the string generated in the html() is not properly formatted:
$('.makelink').each( function(){ // Enclosed the selector with single/double qoute
var target = $(this).data('linkto');
$(this).attr('href','#' + target);
var imp = $('#' + target).data('importance');
$(this).html('Link to the '+ imp + ' div'); // concatenate the string with the variable using +
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>
I am running through a loop, and appending text from an array into a main panel, but I want so that each "chunk" of text is inside it's own panel.
Here's the HTML:
<div class="panel no-overflow">
<p id="fromTweets"> imported text goes here</p>
</div>
My JQUERY:
for (i = 0; i < result.statuses.length; i++) {
//Print out username and status
$("#fromTweets").append('<b>' + "Username: " + '</b>' + result.statuses[i].user.screen_name + '<br/>');
$("#fromTweets").append('<b>' + "Tweet: " + '</b>' + result.statuses[i].text + '<br/>');
}
Also, I guess I'm more generally confused with using css and jquery with the "append" way. Notice how I'm bolding text using <b>, is this bad practice, is there a better way to do this? Same question for the <br> tag.
You are probably best to create a div to which you can append panels. For instance:
<div class="panel-holder">
You can then use the append to append not just text, but a div tag with the class 'panel'.
Here's a fiddle with a quick demonstration:
https://jsfiddle.net/oq2bfyam/1/
I'm trying to add some data to my paragraphs, how ever it is only working for my first p.
I can make it put the data into my last p by using p:gt(0) but seems like I should be able to use p:last-child.
Any idea where I'm going wrong?
HTML
<div class="col-md-12" id="quizEnd" style="display:none;text-align:center;">
<p></p>
<p></p>
<h2></h2>
</div>
JS:
$("#quizEnd p:first-child").text("Navn : " + quizName);
$("#quizEnd p:last-child").text("Email : " + quizMail);
It's because that p element isn't the last child. The h2 elements is.
You could use :last-of-type instead:
$("#quizEnd p:last-of-type").text("Email : " + quizMail);
You could also use the .last() method or the jQuery :last selector:
$("#quizEnd p:last").text("Email : " + quizMail);
$("#quizEnd p").last().text("Email : " + quizMail);
I have a HTML code snippet like this:
<div class="chartPeriodChangeOptions" id="id1">
D
W
</div>
<div class="chartPeriodChangeOptions" id="id2">
D
W
</div>
I am trying to add a class="active", to link with id="id1" and data-period="day".
With the following code, I am able to choose the one with particular data value
$("a[data-period='" + someMethod() + "']").addClass("active");
How can I add id selection part to this as well.
Try this:
$("#id1 > a[data-period='" + someMethod() + "']").addClass("active")
If you want this to be extensible use the 'starts with' selector:
$("div[id^='id'] > a[data-period='" + someMethod() + "']").addClass("active");
This will accept id="id1", id="id2", id="id3", ... etc
use this:
$(document).ready(function(){
$("#id1 a[data-period='" + someMethod() + "']").addClass("active");
});
Basically I have a html output in the format:
<div class="qtip-content">http://www.urlgoeshere.com/image.jpg</div>
What I want to do is use jQuery to wrap this in an image tag so the output is
<div class="qtip-content"><img src="http://www.urlgoeshere.com/image.jpg" /></div>
I have multiple instances of these on the page, and each url is different.
How can I do this?
This will handle each element on your page
$(".qtip-content").each(function() {
$(this).html("<img src='" + $(this).html() + "' />");
}
$('.qtip-content').each(function(){
$(this).html("<img src='"+$(this).html()+"'/>");
});