Develop Reference

Wrap div to javascript output

Basically what I need to do is wrap this code output
<a id="show_selected">Click to Show</a>
<div id="selected"></div>
<script type="text/javascript">
function showSelect(){
$("#show_selected").bind("click", function (e) {
e.preventDefault();
$('#selected').text($("#fvip").mapster("get"));
});
}
showSelect();
</script>
which is right now is just plain
<div id="selected">001,002,003,004</div>
to become
<div="selected">
<div class="something">001</div>
<div class="something">002</div>
<div class="something">003</div>
<div class="something">004</div>
</div>
how can I do that? Is that possible? Many thanks
EDIT with brk 's help below:
I try incorporate it in my code like this:
function showSelect(){
$("#show_selected").bind("click", function (e) {
e.preventDefault();
$('#selected').text($("#fvip").mapster("get"));
let wrapContainer = ""
let stringArray = $("#selected").text().trim().split(' ');
$("#selected").empty()
stringArray.forEach(function(item, index) {
let wrapContainer = $('<div class="test">' + item + '</div>');
$("#selected").append(wrapContainer)
});
});
}
showSelect();
but what I'm getting is:
<div id="selected">
<div class="test">001,002,003,004</div>
</div>
where am I doing wrong?

You can get the text and split it. Then loop over that and put that inside a div . Then append the div to the parent element
let wrapContainer = ""
let stringArray = $("#original").text().trim().split(' ');
$("#original").empty()
stringArray.forEach(function(item, index) {
let wrapContainer = $('<div class="test">' + item + '</div>');
$("#original").append(wrapContainer)
});
.test {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="original">001 002 003 004</div>

Get data attribute value and output image equal to this value

I'm very new to this, I'm looking to get the data-rating value of each line of HTML and output the same image a multiple amount of times for each line, dependent on each value, using jQuery/Javascript.
Here's a sample of the HTML:
<div class="review-value" data-rating="5"></div>
<div class="review-value" data-rating="7"></div>
How can I best do this?

One of the way to do it.
Get the attribute for each div.
Run the loop that many times and add an image in each iteration
$('.review-value').each(function() {
for (var i = 0, len = parseInt($(this).attr("data-rating")); i < len; i++) {
$('<img src="#" />').appendTo($(this))
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="review-value" data-rating="5"></div>
<div class="review-value" data-rating="7"></div>

You can use this code:
$('.review-value').each(function (index, value) {
alert('div' + index + ':' + $(this).attr("data-rating"));
});

Data is HTML's attribute. you can use that as well with Jquery each loop and store the value in Array
var getRating = [];
$('.review-value').each(function () {
getRating.push($(this).data("rating"));
});
alert(getRating);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="review-value" data-rating="5"></div>
<div class="review-value" data-rating="7"></div>

JQuery has data() that can help you get the value of any data attributes:
$(document).ready(function() {
$(".review-value").each(function() {
console.log('Rating: ' + $(this).data('rating'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review-value" data-rating="5"></div>
<div class="review-value" data-rating="7"></div>

JQuery function call firing multiple times

I'm trying to call a function for an html element using jquery. I'm struggling with this has been hours and I can't figure out what is wrong.
I have an answer which I want to mark as solved. A question have multiple answers.
As far as I know the function is being fired the number of answers I have in the question. If I have two answers, the function will run twice and so on.
$(document).ready(function () {
$(".accepted.ans").on('click', function (e) {
e.preventDefault();
var parent = $(this).closest('.accept');
console.log(parent);
var current = $(this);
console.log(current);
var url = parent.data('url');
var qid = parent.data('question');
var aid = parent.data('answer');
$.get(url + '?question=' + qid + '&answer=' + aid, function (data) {
console.log("Reading...");
data = $.parseJSON(data);
console.log(aid);
console.log(e);
setAcceptedStatus(current, data.result);
});
});
});
function setAcceptedStatus(object, status) {
if (status === true) {
object.addClass('active');
}
}
This is my jQuery function. The one that I want to be called exactly once for each answer when I press the accept ans div element, which is:
<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}" >
<div class="accept"
title="Accept this answer"
data-url="{url('controller/api/questions/mark_as_solved')}"
data-refresh="{url('controller/api/questions/refresh_accepted_answers')}"
data-answer="{$answer['answerid']}"
data-question="{$question['publicationid']}">
<div class="accepted ans"
id="{$answer['answerid']}"
title="Unnacept this answer">
</div>
</div>
</blockquote>
I thought this was happening because everytime I want to call that function , since I have $(".accepted.ans") it will apply to all the accepted ans it can find on the document. So I thought in adding an id to the class, something like:
id="{$answer['answerid']}"
but as I read somewhere here, it is supposed to work without that.
I really don't know why it triggers more than once, I did all kind of debug, checked the html structure and everything seems flawless.
Any kind soul got an idea in what is wrong?
Regards

I suspect that somehow the $(document).ready() function is executed as many times as your answers, so the click event handler is binded the same number of times for each answer. Perhaps it's the template that does that?
If that's indeed the problem and you can't find a solution for the template, try changing
$(".accepted.ans").on('click', function (e) {
to
$(".accepted.ans").off('click').on('click', function (e) {
to unbind all click event handlers but the last one.

try changing .closest(... to .parent(). Snippet below...
$(document).ready(function() {
$(".accepted.ans").on('click', function(e) {
e.preventDefault();
var current = $(this),
parent = current.parent();
var url = parent.data('url');
var qid = parent.data('question');
var aid = parent.data('answer');
console.log(aid);
$.get(url + '?question=' + qid + '&answer=' + aid, function(data) {
console.log("Reading...");
data = $.parseJSON(data);
console.log(aid);
console.log(e);
setAcceptedStatus(current, data.result);
});
});
});
function setAcceptedStatus(object, status) {
if (status === true) {
object.addClass('active');
}
}
.ans {
position: static;
width: 90%;
height: 5em;
background: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}">
<div class="accept" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="one" data-question="{$question['publicationid']}">
<div class="accepted ans" id="{$answer['answerid']}" title="Unnacept this answer">
</div>
</div>
</blockquote>
<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}">
<div class="accept" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="two" data-question="{$question['publicationid']}">
<div class="accepted ans" id="{$answer['answerid']}" title="Unnacept this answer">
</div>
</div>
</blockquote>
<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}">
<div class="accept" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="three" data-question="{$question['publicationid']}">
<div class="accepted ans" id="{$answer['answerid']}" title="Unnacept this answer">
</div>
</div>
</blockquote>

Using jQuery, you need to prevent it's function listened by other event attached to its parental tags. So try the stopPropagation(); instead.
$(document).ready(function () {
$(".accepted.ans").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
var parent = $(this).closest('.accept');
console.log(parent);
var current = $(this);
console.log(current);
var url = parent.data('url');
var qid = parent.data('question');
var aid = parent.data('answer');
$.get(url + '?question=' + qid + '&answer=' + aid, function (data) {
console.log("Reading...");
data = $.parseJSON(data);
console.log(aid);
console.log(e);
setAcceptedStatus(current, data.result);
});
});
});
function setAcceptedStatus(object, status) {
if (status === true) {
object.addClass('active');
}
}

Javascript object property doesn't return correct length

I dynamically clone an element using jQuery and ask an object to return its length, but it returns 1 every time. Please see fiddle:
https://jsfiddle.net/gatzkerob/x5xd2x7q/3/
<span class="count">0</span>
<br>
<button>click</button>
<br>
<span class="a">a</span>
var obj = {
elem : $('.a')
}
function cloneThisAndCount(){
$('.a').last().after($('.a').first().clone());
$('.count').text(obj.elem.length);
}
$('button').click(function(){
cloneThisAndCount();
});

var obj = {
elem : $('.a')
}
will be computed once and cached into obj.elem in the begenning. which will be 1.
Note (thanx to nnnnn): When you have a reference to a jQuery object it is possible that other code could update that object to add more elements to it.
SOLUTION 1:
What you need is to do is, redo the selector every time before calculating length.
function cloneThisAndCount() {
$('.a').last().after($('.a').first().clone());
$('.count').text($('.a').length);
}
$('button').click(function() {
cloneThisAndCount();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count">0</span>
<br>
<button>click</button>
<br>
<span class="a">a</span>
SOLUTION 2:
Change obj to:
var obj = {
elem : function(){ return $('.a')}
}
and then check length like: $('.count').text(obj.elem().length);
var obj = {
elem: function() {
return $('.a')
}
}
function cloneThisAndCount() {
$('.a').last().after($('.a').first().clone());
$('.count').text(obj.elem().length);
}
$('button').click(function() {
cloneThisAndCount();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count">0</span>
<br>
<button>click</button>
<br>
<span class="a">a</span>

Javascript innerHTML animation

I have a Countdown in Javascript and HTML. Its working through innerHTML and I want a animation when changing the values from innerHTML.
Countdown is working perfectly!
Javascript:
var jahr=2016, monat=5, tag=15, stunde=11, minute=2, sekunde=00; var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde); function countdown() {
startDatum=new Date(); // Aktuelles Datum
if(startDatum<zielDatum) {
var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
while(startDatum<zielDatum) {
jahre++;
startDatum.setFullYear(startDatum.getFullYear()+1);
}
startDatum.setFullYear(startDatum.getFullYear()-1);
jahre--;
while(startDatum<zielDatum) {
monate++;
startDatum.setMonth(startDatum.getMonth()+1);
}
startDatum.setMonth(startDatum.getMonth()-1);
monate--;
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000);
sekunden=Math.floor((zielDatum-startDatum)/1000);
(jahre!=1)?jahre=jahre+"":jahre=jahre+"";
(monate!=1)?monate=monate+"":monate=monate+"";
(tage!=1)?tage=tage+"":tage=tage+"";
(stunden!=1)?stunden=stunden+"":stunden=stunden+"";
(minuten!=1)?minuten=minuten+"":minuten=minuten+"";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+"":sekunden=sekunden+"";
document.getElementById('days').innerHTML = ""+tage+"";
document.getElementById('hours').innerHTML = ""+stunden+"";
document.getElementById('minutes').innerHTML = ""+minuten+"";
document.getElementById('seconds').innerHTML = ""+sekunden+"";
if(tage==1){
dayText = "Tag";
} else {
dayText = "Tage";
}
if(stunden==1){
hoursText = "Stunde";
} else {
hoursText = "Stunden";
}
if(minuten==1){
minutesText = "Minute";
} else {
minutesText = "Minuten";
}
if(sekunden==1){
secondsText = "Sekunde";
} else {
secondsText = "Sekunden";
}
document.getElementById('daysText').innerHTML = ""+dayText+"";
document.getElementById('hoursText').innerHTML = ""+hoursText+"";
document.getElementById('minutesText').innerHTML = ""+minutesText+"";
document.getElementById('secondsText').innerHTML = ""+secondsText+"";
setTimeout('countdown()',200);
} else {
}
}
HTML:
<div class="time days">
<div id="days" class="value">00</div>
<div id="daysText" class="unit">Days</div>
</div>
<div class="time hours">
<div id="hours" class="value">00</div>
<div id="hoursText" class="unit">Hours</div>
</div>
<div class="time minutes">
<div id="minutes" class="value">00</div>
<div id="minutesText" class="unit">Minutes</div>
</div>
<div class="time seconds">
<div id="seconds" class="value">00</div>
<div id="secondsText" class="unit">Seconds</div>
</div>
And how can I do for example a fadeInDown animation?
Thanks!

The easiest way to do this would probably be JQuery, found at JQuery.com.
I also found a similar question here: jquery animation on div innerhtml on change
As for your code, you'll want something like:
$('#daysText').fadeOut(1000, function()
{
$(this).html(dayText).fadeIn(1000);
});
$('#hoursText').fadeOut(1000, function()
{
$(this).html(hoursText).fadeIn(1000);
});
$('#minutesText').fadeOut(1000, function()
{
$(this).html(minutesText).fadeIn(1000);
});
$('#secondsText').fadeOut(1000, function()
{
$(this).html(secondsText).fadeIn(1000);
});
Note that this will only work with JQuery installed. Instructions to this can be found at http://jquery.com/download/
Short version of said instructions: Add the following code to your HTML (Commonly done near the bottom of the document) to include the JQuery library
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

You can't animate a text-node directly.
You'll have to animate a wrapping element, which will have dynamically set style values. Something like:
<span style="opacity:0;">your content</span>
Also, changing innerHTML is a complete replacement of existing elements, it will "break" any ongoing animations inside the parent element.