We Keep Coding

Get previous and next list item id if has?

I stuck on a point and need your some help friends. I need previous and next list. For example i have three li in a ul and this second one is active. Now i have to get previous and next li id. and if first li is active the don't do any thing also if last li then don't do any thing.
<ul>
<li id="1">First <span class="testId">14</span></li>
<li id="2" class="active">Second <span class="testId">15</span></li>
<li id="3">Third <span class="testId">16</span></li>
</ul>
Jquery code i try but did not understand how to do this
if(){
alert('good');
/*var PrevTestId = $(this).prev('li').find('.testId').text();
var thisId = $(this).next().find('.testId').text();
alert(PrevTestId +" , "+ thisId);*/
}
if($(this).index() > 0){
var PrevTestId = $(this).prev('li').find('.testId').text();
var thisId = $(this).next().find('.testId').text();
alert(PrevTestId +" , "+ thisId);
}

Here you go with the solution https://jsfiddle.net/1aL33df4/
$('li').hover(function(){
if( typeof $(this).prev().attr('id') != 'undefined')
console.log("Previous Element ID: " + $(this).prev().attr('id'));
if( typeof $(this).next().attr('id') != 'undefined')
console.log("Next Element ID: " + $(this).next().attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="1">First <span class="testId">14</span></li>
<li id="2" class="active">Second <span class="testId">15</span></li>
<li id="3">Third <span class="testId">16</span></li>
</ul>

Use .next() or .prev() to get respective li
use .attr() to get the id
use hasClass() to test if li has active class
var pliid = $("ul li.active").prev('li').attr('id');
var nliid = $("ul li.active").next('li').attr('id');
console.log("prev li id is " + pliid)
console.log("prev li is active " + $("ul li.active").prev('li').hasClass('active'))
console.log("prev li textid text " + $("ul li.active").prev('li').find('.testId').text())
console.log("next li id is " + nliid)
console.log("next li is active " + $("ul li.active").next('li').hasClass('active'))
console.log("next li textid text " + $("ul li.active").next('li').find('.testId').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="1">First <span class="testId">14</span></li>
<li id="2" class="active">Second <span class="testId">15</span></li>
<li id="3">Third <span class="testId">16</span></li>
</ul>

Generating an array from based on selected UL LI item - How do you remove a trailing whitespace?

I can't seem to be able to figure out as to why my array would have a trailing white space. The end result after building my array based on selected li items currently looks like this: 1234 ,0123 how can I get the output to be: 1234,0123?
Here is the Code in question:
var arr_numbers = [];
window.onload = function() {
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("select")) {
$(this).find('ul li').hide();
}
});
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
if (e.ctrlKey) {
e.stopPropagation();
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$(this).addClass('selected');
}
var c = $(this).parent().find("li.selected").length;
$(this).closest("div").contents().first()
.replaceWith((c > 1) ? "(" + c + ")" : $(this).text());
}
else {
$(this).closest("div").contents().first()
.replaceWith($(this).text());
var id = $(this).closest('[id]').attr('id');
$(this).closest('.select').find("ul li").removeClass('selected');
$(this).addClass('selected');
}
});
}
function get_data_array(element) {
if (element == 'numbers') {
var data_array_numbers = [];
var list = $("#numbers ul").find("li.selected")
$.each(list, function() {
//alert($(this).data('val'));
//alert($(this).text());
data_array_numbers.push($(this).text());
});
alert(data_array_numbers);
}
}
This is the HTML:
Numbers
<div class="select" id="numbers">
<ul>
<li> </li>
<li data-val="1234">1234</li>
<li data-val="5678">5678</li>
<li data-val="0123">0123</li>
</ul>
</div>
<br><br>
Letters
<div class="select" id="letters">
<ul>
<li> </li>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
Fruits
<div class="select" id="fruits">
<ul>
<li> </li>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
<br><br>
<input type="button" value="test" onclick="get_data_array('numbers')">

Use jQuery.trim() , to remove the whitespace from the beginning and end of a string
data_array_numbers.push(jQuery.trim($(this).text()))

In addition to #Pranav's answer you can also use usual string trim:
data_array_numbers.push($(this).text().trim());
Mind you it doesn't work <=ie8
w3 reference

Change html position with jQuery

I'm trying to change the position of some list with jQuery in function of an array
http://jsfiddle.net/6r5jp5Lk/9/
$('div').each(function() {
var answer = JSON.parse('[' + $(this).find('.order').val() + ']'),
list = $(this).find('ul');
$.each(answer, function(index, value) {
list.append($('li[data-order="' + value + '"]'));
});
});
Why the content is appending twice?

Change your div to .list and it works fine
$('.list').each(function() {
var answer = JSON.parse('[' + $(this).find('.order').val() + ']'),
list = $(this).find('ul');
$.each(answer, function(index, value) {
list.append($('li[data-order="' + value + '"]'));
});
});

You are not closing your div tags, if you check you have 4 div tags. Check the updated jsfiddle.
<div>
<ul class="list">
<li data-order="1">1</li>
<li data-order="2">2</li>
<li data-order="3">3</li>
<li data-order="4">4</li>
<input class="order" type="hidden" value="4,2,1,3" />
</ul>
</div>
<div>
<ul class="list">
<li data-order="1">1</li>
<li data-order="2">2</li>
<li data-order="3">3</li>
<li data-order="4">4</li>
<input class="order" type="hidden" value="3,2,4,1" />
</ul>
</div>
http://jsfiddle.net/6r5jp5Lk/16/

I fixed http://jsfiddle.net/6r5jp5Lk/15/
$('.list').each(function() {
var answer = $(this).find('.order').val().split(','),
list = $(this);
$.each(answer, function(index, value) {
list.append($('li[data-order="' + value + '"]', list));
});
});

Creating dynamic ul li for a carousel with Jquery

I am building a carousel with a ul li dynamically using the following code:
var arrEanSample = [];
var arrPathSample = [];
var arrValSample = [];
var thecookie = $.cookie("sample");
var cookies = thecookie.split("|");
cookies.forEach(function(item){
var barcode= item.split('~')[0];
var value = item.split('~')[1];
var path = item.split('~')[2];
arrEanSample.push(barcode);
arrPathSample.push(path);
arrValSample.push(value);
});
var output='<ul class="slides">';
for(var i = 0; i < arrEanSample.length; i++)
{
output+= '<li ean="' + arrEanSample[i] + '">\
<img src="' + arrPathSample[i] + '" alt="pix" draggable="false">\
<a imgpath="' + arrPathSample[i] + '" value="' + arrValSample[i] +'" ean="' + arrEanSample[i] +'" class="unselectsample-thumb" data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
<i aria-hidden="true" class="fonticon fonticon-close-neg">\
<span class="sr-only">Remove</span>\
</i>\
</a>\
</li>';
}
output+='</ul>';
$('.flexslider').empty().append(output);
The code above is generating a html that looks like this(unnecessary codes removed):
<div class="flexslider">
<ul class="slides">
<li ean="9904153320507">
<li ean="9904153300509">
<li ean="9904153441004">
<li ean="9911199120503">
<li ean="9911199071003">
</ul>
</div>
My problem is, i have to group all the LI's in sets of 10, whereby one li would countain a ul with 10 such LI's. As follows:
<div class="flexslider">
<ul class="slides">
<li>
<div class="list-samples">
<ul class="reset">
<li> li number 1 </li>
<li> li number 2 </li>
<li> li number 3</li>
<li> li number 4</li>
<li> li number 5</li>
<li> li number 6</li>
<li> li number 7</li>
<li> li number 8</li>
<li> li number 9</li>
<li> li number 10</li>
</ul>
</div>
</li>
<li>
<div class="list-samples">
<ul class="reset">
<li> li number 11 </li>
<li> the list goes on - as sets of 10's ... </li>
</ul>
</div>
</li>
</ul>
</div>
Can anyone please help me on achieving the above code with my starting JS
Any help would be appreciated
Thanks

output = '<ul class="slides"><li><div class="list-samples"><ul class="reset">';
for(var i = 0; i < arrEanSample.length; i++){
if(i % 10 == 0 && i != 0){
output += '</ul></div></li><li><div class="list-samples"><ul class="reset">';
}
output+= '<li ean="' + arrEanSample[i] + '">\
<img src="' + arrPathSample[i] + '" alt="pix" draggable="false">\
<a imgpath="' + arrPathSample[i] + '" value="' + arrValSample[i] +'" ean="' + arrEanSample[i] +'" class="unselectsample-thumb" data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
<i aria-hidden="true" class="fonticon fonticon-close-neg">\
<span class="sr-only">Remove</span>\
</i>\
</a>\
</li>';
}
}
output += '</ul></div></li></ul>';

jQuery append() and data()

I have unknown number of divs with increasing ID's:
<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>
And I have another list:
<ul>
<li id="target-1" class="target"> </li>
<li id="target-2" class="target"> </li>
<li id="target-3" class="target"> </li>
<li id="target-4" class="target"> </li>
</ul>
Now, what I want to achive is grabbing data-grab URL from source-1 and append it to target-1 as a image and so forth. So finally the output list will look just like:
<ul>
<li id="target-1"><img src="someURL" /> </li>
<li id="target-2"><img src="anotherURL" /> </li>
<li id="target-3"><img src="anddifferentURL" /> </li>
<li id="target-4"><img src="andthelastoneURL" /> </li>
</ul>
I'm grabbing all the data from the first list, but I'm not sure how to append right source element to right target element?
$(document).ready(function(){
$('.target').each(function(){
var URL = jQuery(this).data('grab');
});
});

$(document).ready(function(){
$('.target').each(function(){
var $this = $(this);
var divID = "source-" + ($this.id()).split("-")[1];
$("a", $this).append('<img src="' + $(divID).data("grab") + '" />');
});
});

You can use indices to select the right elements, if you add a class to your source elements (like .source):
$(document).ready(function(){
var targets = $( '.target' );
$('.source').each(function(index, value){
$(target[index]).children("a").first().append($("<img src=" + value.data('grab') + " />"));
});
});