Develop Reference

Swap Position of two DIV using ID

i'm trying to change the position of two DIV'S in jquery, it seems that i may be a little confuse because it is already swapping position, but when it do, it duplicates the field.
i tried using insertBefore and insertAfter.
<div id="before_stops">
<li><span><img src="<?php echo base_url('assets/images/multi_stops.png') ?>" width="18px"height="18px"/></span>
<div class="verticalLine"></div>
<span class="text multi_non_append_stops"></span>
<br><br>
</li>
</div>
<div id="multi_stops">
<span class="text multi">
<li><span>
<img src="<?php echo base_url('assets/images/EndPoint.png')?>" width="18px" height="18px"></span>
<div class="verticalLine"></div>
<br/><br>
</li>
</span>
</div>
Here is my javascript code:
for (var i = 0; i < data.stops.length; i++) {
if(value == "A" || value == "B"){
$('#multi_stops').insertBefore($('#before_stops'));
$('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
}else{
$('#multi_stops').insertAfter($('#before_stops'));
$('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
}
}
what is happening is instead of having a output of
if the value is A or B
it should be
<div id ="multi_stops"></div>
<div id ="before_stops"><div>
but what is happening to me is
<div id ="multi_stops"></div>
<div id ="before_stops"><div>
<div id ="multi_stops"></div>
else if the value is not A or B
it should only be
<div id ="before_stops"></div>
<div id ="multi_stops"><div>
but what is happening is
<div id ="before_stops"></div>
<div id ="multi_stops"><div>
<div id ="multi_stops"></div>
it is duplicating. what am i doing wrong here.

You need to copy the element, insert it after, then delete the first one. Or you would end up with duplicates. You could use jquerys detach method. It removes the object but it keeps the data. Use it like this:
for (var i = 0; i < data.stops.length; i++) {
if (value == "A" || value == "B") {
$('#multi_stops').detach().insertBefore($('#before_stops'));
$('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
} else {
$('#multi_stops').detach().insertAfter($('#before_stops'));
$('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
}
}

Try this:
<div class="holder">
<div id="before_stops">
</div>
<div id="multi_stops">
</div>
</div>
if(value == "A" || value == "B"){
$("#before_stops").appendTo(".holder");
}else{
$("#multi_stops").appendTo(".holder");
}
Live example: https://codepen.io/noelelias/pen/bGbwwBz

Creating simple new parent elements with incrementing class numbers without changing the HTML

I'm trying to create a few elements with class names to have a number on the end that increments by 1 for each new element. E.g. <div class='someClass1'></div>, then <div class='someClass2'></div>, <div class='someClass3'></div>, etc...
However, I can only get the child elements to have incrementing class names, e.g. <span class='0'>here</span>, <span class='1'>here</span>, <span class='2'>here</span>, etc, which is done by changing the inner HTML.
How can I get the parent 'someClass' to have incrementing class numbers? I tried newNode.classList.add("someClass + noAdded"); but returns a syntax error. Thanks for any help here - my code is as follows:
var testy = document.getElementById('testy'); // <div id='testy'></div>
var noAdded = 0;
function addToPage() {
var newNode = document.createElement("div"); // <div></div>
newNode.classList.add("someClass"); // <div class='someClass'></div>
newNode.innerHTML = '<span class="' + noAdded + '">here</span>'; // <span class='0'>here</span>
testy.appendChild(newNode); // <div id='testy'><span class='0'>here</span></div>
noAdded++;
}
addToPage();
addToPage();
addToPage();
Results in:
<div id="testy">
<div class="someClass">
<span class="0">here</span>
</div>
<div class="someClass">
<span class="1">here</span>
</div>
<div class="someClass">
<span class="2">here</span>
</div>
</div>

Concatenate the value of the variable noAdded to the string someClass.
Change
newNode.classList.add("someClass");
To
newNode.classList.add("someClass"+noAdded);
var testy = document.getElementById('testy'); // <div id='testy'></div>
var noAdded = 0;
function addToPage() {
var newNode = document.createElement("div"); // <div></div>
newNode.classList.add("someClass"+noAdded); // <div class='someClass'></div>
newNode.innerHTML = '<span class="' + noAdded + '">here</span>'; // <span class='0'>here</span>
testy.appendChild(newNode); // <div id='testy'><span class='0'>here</span></div>
noAdded++;
}
addToPage();
addToPage();
addToPage();
.someClass0{color:red;}
.someClass1{color:green;}
.someClass2{color:blue;}
<div id="testy">
</div>

jQuery attr("src") returning undefined

I'm trying to grab the source of an image using jQuery. However, when I log the result, it returns undefined. Here is my code:
$(document).ready(function() {
$(".btn-expand").on("click", function() {
var img = $(".img-" + "num" + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

$(".img-" + "num" + " img")
is exactly equivalent to
$(".img-num img")
I believe you meant "num" to be a variable called num whose value is the number of the target image, not a hard-coded string:
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

Well you have an attribute on the anchor you do not read. Change it to be a data attribute and use a variable instead of hardcoding a string.
$(document).ready(function() {
$(".btn-expand").on("click", function (e) {
e.preventDefault()
var overlay = $(this).data("overlay")
var img = $(".img-" + overlay + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="http://via.placeholder.com/350x150" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

Everything looks good except that the attribute value wasn't defined. To set an attribute in jQuery, you must set the value. Hence, to correct that snippet.
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src","imageSource.extention");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

var img = $(".img-" + "num" + " img").attr("src");
in this code you are looking for tag with class "im-num" and child with class "img". if you give class im-num to outer div and class img like below
<div class="col-md-12 img-banner img-2 im-num">
<img src="assets/img/placeholder-banner.png" alt="Banner 2" class='img'/>
</div>

javascript loop thought bootstrap

I have a simple bootstrap page I need to load JSON data into it:
This is my script:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var tweets = JSON.parse(xhr.responseText);
var tweet = ' <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">';
var name = ' <h4 class="card-title">';
var photo = ' <div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">';
for (var i = 0; i < tweets.length; i += 1) {
name += tweets[i].name;
name += '</h4> </div>';
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';
document.getElementById('photo').innerHTML = photo;
document.getElementById('name').innerHTML = name;
document.getElementById('tweet').innerHTML = tweet;
// close all html tags
}
}
};
xhr.open('GET', 'empdata.json');
xhr.send();
And this is my HTML:
<div class="container">
<div class="card">
<div class="card-header">
<div class="row">
<div id="photo">
<!-- here where the pic goes ! -->
</div>
<div id="name">
<!-- here where the name goes ! -->
</div>
</div>
<div class="card-block row">
<div id="tweet">
<!-- here where the tweet goes ! -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-block row">
<div id="tweet"> </div>
</div>
It loops correctly through all JSON data, but it displays all the pictures first then the names and finally the tweets separately. think the problem is related to the mechanism I follow in the loop.

I think you mean to do this. It can be much simpler but without changing your html I would do this:
var container = document.querySelector(".container");
for (var i=0; i<tweets.length; i += 1) {
var name = ' <h4 class="card-title">';
name += tweets[i].name;
name += '</h4> </div>';
var tweet = '<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">'
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
var photo ='<div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">'
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';
container.innerHTML+='<div class="card"><div class="card-header">'+
photo+name+tweet+'</div></div>';
}

EDITED Try set innerText outside from the loop
for (var i=0; i<tweets.length; i += 1) {
name += tweets[i].name;
name += '</h4> </div>';
...
photo += tweets[i].pic;
photo += '"></div></div>';
}
document.getElementById('name').innerHTML = name;
document.getElementById('photo').innerHTML = photo;

Sorting script inside function doesn't work correctly

I'm trying to turn a script into a function, because it's very tiresome repeating the same code over and over again.
The script selects a container which will be holding a new accordion soon. Every accordion inside the container has a unique data-sort id. (It needs to sort from 1 to 10)
It then detects if there are any accordions with an id smaller or bigger than it and adds itself between them.
The script works correctly without it being inside a function.
This script without a function works correctly
var $container = $('.panel-group[data-group-holder="' + dataPlace + '"]'),
$d = $container.find('div.panel-default'),
$n = $('<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>');
var $a = $d.filter(function () {
return $(this).data('sort') < dataSort;
}).last();
$(that).parents('div:eq(0)').remove();
/*alert($('.draggable-groups .main-groups[data-sort="' + dataSort + '"]').parents().html());*/
if ($a.length) $a.after($n);
else $container.prepend($n);
This function does not work correctly (it doesn't sort)
function placeSort(thisContainer, containerFind, placeHtml, returnCompareOneFind, returnCompareOne, returnCompareTwo, removeClone) {
var $container = $(thisContainer),
$d = $container.find(containerFind),
$n = $(placeHtml);
if(returnCompareOneFind == "false") {
var $a = $d.filter(function () {
return $(this).data(returnCompareOne) < returnCompareTwo;
}).last();
} else {
var $a = $d.filter(function () {
return $(this).find(returnCompareOneFind).data(returnCompareOne) < returnCompareTwo;
}).last();
}
removeClone;
if ($a.length) $a.after($n);
else $container.prepend($n);
}
function addGroupAccordion(that, dataSort, dataPlace, dataHtml) {
var thisContainer = '.panel-group[data-group-holder="' + dataPlace + '"]';
var containerFind = 'div.panel-default';
var placeHtml = '<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>';
var returnCompareOneFind = "false";
var returnCompareOne = 'sort';
var returnCompareTwo = dataSort;
var removeClone = $(that).parents('div:eq(0)').remove();
placeSort(thisContainer, containerFind, placeHtml, returnCompareOne, returnCompareTwo, removeClone);
}
$(document).on('click','.draggable-groups .main-groups',function(){
var dataSort = $(this).attr("data-sort");
var dataPlace = $(this).parents('div:eq(1)').attr("data-group");
var dataHtml = $(this).html();
var that = $(this);
addGroupAccordion(that, dataSort, dataPlace, dataHtml);
var groupHolder = dataPlace;
countChildren(groupHolder);
});
HTML
<div class="panel panel-default">
<div class="panel-heading main">
<h4 class="panel-title">
<a class="accordion-toggle collapsed main side-js" data-parent="#main-panel" data-panel="00" data-toggle="collapse" href="#panel-00">
<span>0</span>Tellija kulud
<b>(<span class="cat-count">0</span>)</b>
<i class="icon-angle-down"></i>
</a>
</h4>
</div>
<div id="panel-00" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" data-group-holder="00">
</div>
</div>
</div>
</div>
<h3>Main groups</h3>
<div class="row draggable-groups" data-group="00">
<div class="col-md-6">
<div class="main-groups" data-sort="01">01</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="02">02</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="03">03</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="04">04</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="05">05</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="06">06</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="07">07</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="08">08</div>
</div>
</div>
Creating a jsFiddle would take too much time recreating this. I'm sorry for lacking it.

Your issue likely comes down to an issue with trying to pass this
Give this a try:
function addGroupAccordion(self, dataSort, dataPlace, dataHtml) {
...
var removeClone = $(self).parents('div:eq(0)').remove();
...
}
$(document).on('click','.draggable-groups .main-groups',function(){
...
var self = this; // 'self' is more standardized
addGroupAccordion(self, dataSort, dataPlace, dataHtml);
...
});
What is going on here is that when you were setting var that = $(this); in the $().on function, you were storing the jQuery object containing this, then when you were trying to use it in the addGroupAccordion function by using $(that), you were asking jQuery to do: $($(this)).