We Keep Coding

Loop a next button to return showing from the begining

$(document).ready(function() {
$(".container .parts").each(function(e) {
if (e > 1)
$(this).hide();
console.log(e);
});
$("#next").click(function() {
if ($(".container .parts:visible:last").next().length != 0) {
$(".container .parts:visible:last").next().show();
$(".container .parts:visible:last").next().show();
$(".container .parts:visible:first").hide();
$(".container .parts:visible:first").hide();
} else {
$(".container .parts:visible:last").hide();
$(".container .parts:visible:last").hide();
$(".container .parts:visible:first").next().show();
$(".container .parts:visible:first").next().show();
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="parts">A</div>
<div class="parts">B</div>
<div class="parts">C</div>
<div class="parts">D</div>
<div class="parts">E</div>
</div>
<div>
<button id="next">Next</button>
</div>
Hello, In the code here, I'm trying to make the script return to showing first two divs again if it is the end of the divs, But at the last one it disappears.

Ok,
I think this should do what your after, it does the (AB), (CD), (E), and then back to (AB)....
$(document).ready(function() {
var step = 0;
var dcount = 2; //how many divs shall we show..
var parts = $('.container .parts');
function showbits() {
//loop all parts
parts.each(function (x) {
//is our step in range..?
$(this).toggle(x >= step && x < step + dcount);
});
//increae our step by out div count..
step = step + dcount;
//if step is greater than length go back to 0..
if (step >= parts.length) step = 0;
}
showbits();
$("#next").click(showbits);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="parts">A</div>
<div class="parts">B</div>
<div class="parts">C</div>
<div class="parts">D</div>
<div class="parts">E</div>
</div>
<div>
<button id="next">Next</button>
</div>

$(document).ready(function() {
var $arr = $(".container .parts"), // the whole collection
index = 0; // index at which to start showing
function showNext() {
$arr.hide(); // hide all
$arr.eq(index).show(); // show the element at index (these two lines could be replaced with a for loop if the number of divs to show is dynamic: (for(var i = 0; i < numberOfDivsToShow; i++) $arr.eq(index + i).show();)
$arr.eq(index + 1).show(); // show the element at index + 1 (if any, if not don't worry as jQuery takes care of that)
index = index + 2; // increment index by 2 (if the number of divs to show is dynamic then instead of adding 2, you must add the number of divs: index = index + numberOfDivsToShow;)
if(index >= $arr.length) index = 0; // if we pass $arr.length then go back to 0
}
$("#next").click(showNext); // when clicking the #next button, show the next elements
showNext(); // by default show the first two
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="parts">A</div>
<div class="parts">B</div>
<div class="parts">C</div>
<div class="parts">D</div>
<div class="parts">E</div>
</div>
<div>
<button id="next">Next</button>
</div>

because in your code, once the last visible element becomes invisible, there are no elements visible anymore, so the :visible selector can't find any elements.
Of course there are many ways to solve this problem, but I just want to make a minimum modification to your code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="container">
<div class="parts">A</div>
<div class="parts">B</div>
<div class="parts">C</div>
<div class="parts">D</div>
<div class="parts">E</div>
</div>
<div>
<button id="next">Next</button>
$(document).ready(function() {
$(".container .parts").each(function(e) {
if (e > 1)
$(this).hide();
console.log(e);
});
$("#next").click(function() {
if ($(".container .parts:visible:last").next().length != 0) {
$(".container .parts:visible:last").next().show();
$(".container .parts:visible:last").next().show();
$(".container .parts:visible:first").hide();
$(".container .parts:visible:first").hide();
} else {
$(".container .parts:visible:last").hide();
$(".container .parts:visible:last").hide();
$(".container .parts:first").show(); //only modified these two lines
$(".container .parts:first").next().show();
}
return false;
});
});

Move one element into another element with remaining elements going to a third location

I am trying to swap elements with the moveButton function. When the user clicks on one of the images is moves the first one to the #good div and then any remaining will go into the #evil div. I have the if/else statement I thought would work.
<div id="character">
<script type="text/javascript">
function moveButton(elem){
if( $(elem).parent().attr("id") == "menu" ){
$(elem).detach().appendTo('#good');
}
else{
$(elem).detach().appendTo('#evil');
}
}
</script>
</div>
<div id="good">
</div>
<div id="evil">
</div>
<div id="menu">
<div class="character" onclick="moveButton(this)" data-name="Chomper">
<p>Chomper</p><p><img width="100" src="http://vignette2.wikia.nocookie.net/plantsvszombies/images/a/a3/Chomper1.png/revision/latest?cb=20090521220057" alt=" + Chomper + "></p><p>Hit Points: 3.55</p>
</div>
<div class="character" onclick="moveButton(this)" data-name="Kernel-pult">
<p>Kernel-pult</p><p><img width="100" src="http://vignette4.wikia.nocookie.net/plantsvszombies/images/c/c4/Kernel-pult1.png/revision/latest?cb=20090521220358" alt=" + Kernel-pult + "></p><p>Hit Points: 1.55</p>
</div>
</div>

Gate your if with a boolean like fiddle
<script type="text/javascript">
var good = false;
function moveButton(elem) {
if ($(elem).parent().attr("id") == "menu" && !good) {
$(elem).detach().appendTo('#good');
} else {
$(elem).detach().appendTo('#evil');
}
good = true;
}
</script>
To send all remaining caracters to evil use $("#menu").find(".character").detach().appendTo('#evil');
like in fiddle 2
<script type="text/javascript">
var good = false;
function moveButton(elem) {
if ($(elem).parent().attr("id") == "menu" && !good) {
$(elem).detach().appendTo('#good');
} else {
$(elem).detach().appendTo('#evil');
}
$("#menu").find(".character").detach().appendTo('#evil');
good = true;
}
</script>

Do not pass THIS to your function, it's already there in the scope. Also using detach() method, you are removing elements from DOM. Try the following...
function moveButton() {
if( $(this).parent().attr("id") == "menu" ) {
$(this).appendTo('#good');
} else {
$(this).appendTo('#evil');
}
}

Navigate through multiple divs using next/prev

So basically my DIV will look like this.
<div id="group">
<div id="one">one</div>
<div style="display:none" id="two">two</div>
<div style="display:none" id="three">three</div>
<div style="display:none" id="four">four</div>
</div>
<div id="next">next</div>
<div style="display:none" id="prev">prev</div>
<div style="display:none" id="prev">SUBMIT</div>
This is just an example, I could even have 10 or 20 divs.
I want to navigate from one to four in this example. When it reaches end it must hide the next button and show submit button. And when I navigate back to first page it must hide the prev button
Here's what I have tried so far:
$("#next").click(function () {
$("#prev").show();
$("#one").hide();
$("#one").addClass("current");
$(".current").next().addClass("current").show();
$(".current").prev().removeClass("current").hide();
});
$("#prev").click(function () {
$("#prev").show();
$("#one").hide();
$("#one").addClass("current");
$(".current").prev().addClass("current").show();
$(".current").next().removeClass("current").hide();
});
This works for certain navigation after that it gets messes up. Some guidance will be helpful to me and others.
Thanks
JSFIDDLE : http://jsfiddle.net/aVJBY/450/

I see you have an answer, but I would suggest a more structured approach that reuses a single code path:
http://jsfiddle.net/TrueBlueAussie/aVJBY/460/
function updateItems(delta)
{
var $items = $('#group').children();
var $current = $items.filter('.current');
var index = $current.index();
var newIndex = index+delta;
// Range check the new index
newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length) ? $items.length : newIndex);
if (newIndex != index){
$current.removeClass('current');
$current = $items.eq(newIndex).addClass('current');
// Hide/show the next/prev
$("#prev").toggle(!$current.is($items.first()));
$("#next").toggle(!$current.is($items.last()));
}
}
$("#next").click(function () {
updateItems(1);
});
$("#prev").click(function () {
updateItems(-1);
});
Notes:
The range capping can be simplified, but you get the idea.
You do not need to initial inline styling as that can be done in the CSS.
This is not limited in any way by the content. Here I added 6 more divs: http://jsfiddle.net/TrueBlueAussie/aVJBY/463/
Update
As I do not like situations where styling is required for initial "state" in a page, here is a new version that sets the initial state correctly too without any initial styling (using a 0 delta). I also removed a redundant var:
function updateItems(delta)
{
var $items = $('#group').children();
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$("#prev").toggle(!$current.is($items.first()));
$("#next").toggle(!$current.is($items.last()));
}
$("#next").click(function () {
updateItems(1);
});
$("#prev").click(function () {
updateItems(-1);
});
// Cause initial selection
updateItems(0);
JSFiddle: http://jsfiddle.net/TrueBlueAussie/aVJBY/468/

I am showing another approach where you can set the current item to any element, and it will show the next prev arrows accordingly.
$(function() {
var updateDiv = function(trigger) {
var currentDiv = $(".current");
$("#group div").removeClass("current").hide();
if (trigger.hasClass("next") && currentDiv.next("div").length > 0) {
currentDiv.next("div").addClass("current").show();
} else if (trigger.hasClass("prev") && currentDiv.prev("div").length > 0) {
currentDiv.prev("div").addClass("current").show();
}
updateNavigation();
};
var updateNavigation = function() {
var intialDiv = $(".current");
intialDiv.show();
var intialDivIndex = intialDiv.index();
intialDivIndex > 0 ? $("#prev").show() : $("#prev").hide();
intialDivIndex < totalDivs - 1 ? $("#next").show() : $("#next").hide();
};
var totalDivs = $("#group div").length;
updateNavigation();
$("#next, #prev").on("click", function() {
updateDiv($(this));
});
});
#group div {
border: 1px solid red;
width: 100px;
height: 100px;
}
#next {
margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="group">
<div id="one" style="display:none">one</div>
<div style="display:none" id="two">two</div>
<div style="display:none" id="three">three</div>
<div style="display:none" id="four" class="current">four</div>
<div style="display:none" id="five">five</div>
<div style="display:none" id="six">six</div>
<div style="display:none" id="seven">seven</div>
<div style="display:none" id="eight">eight</div>
</div>
<div id="next" style="display:none" class="next">next</div>
<div style="display:none" id="prev" class="prev">prev</div>
<div style="display:none" id="prev">SUBMIT</div>

I'd also like to suggest this approach though as I see the problem's been solved:
var $divs = $("#group").children("div"),
index = 0;
$("#next").click(function () {
updateStatus(1);
});
$("#prev").click(function () {
updateStatus(-1);
});
function updateStatus(a) {
$divs.eq(index).removeClass("current").hide();
index += a;
$divs.eq(index).addClass("current").show();
$("#next").toggle(index !== $divs.length - 1);
$("#prev").toggle(index !== 0);
}
Fiddle

Maybe help you below code.
Updated... again...
$( "#next" ).click(function() {
if($(".current").length!=1){
$( "#group:first-child" ).addClass("current");
}
$(".current").removeClass("current").hide().next().addClass("current").show();
if($(".current").next().length!=1){
$( "#next" ).hide();
}
$( "#prev" ).show();
});
$( "#prev" ).click(function() {
if($(".current").length!=1){
$( "#group:last-child" ).addClass("current");
}
$(".current").removeClass("current").hide().prev().addClass("current").show();
if($(".current").prev().length!=1){
$( "#prev" ).hide();
}
$( "#next" ).show();
});
Fiddle Updated

You should create a function to hide or show the prev and next buttons on click. You can use the .index() function of jQuery to check if the current div is the first or last item inside the div#group
$(function(){
var $cur = $('#group .current');
var $items = $('#group .item');
function hideButtons() {
$cur = $('#group .current');
var index = $cur.index();
if(index > 0) {
$('#prev').show();
} else {
$('#prev').hide();
}
if(index < $items.length - 1) {
$('#next').show();
} else {
$('#next').hide();
}
}
hideButtons();
$('#next').click(function(){
$cur.next().addClass('current');
$cur.removeClass('current');
hideButtons();
});
$('#prev').click(function(){
$cur.prev().addClass('current');
$cur.removeClass('current');
hideButtons();
});
});
.item {
display: none;
}
.item.current {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="group">
<div id="one" class="current item">one</div>
<div id="two" class="item">two</div>
<div id="three" class="item">three</div>
<div id="four" class="item">four</div>
</div>
<button id="next">next</button>
<button style="display:none" id="prev">prev</button>

Implementing colspan on DIVS

I have a div layout like this
Style
.l-item{
display:inline-block;
border:1px solid #CCC;
width:20px;
height:20px
}
<div id="head">
<div>
<div class="l-item">a</div>
<div class="l-item">a</div>
<div class="l-item">a</div>
<div class="l-item">a</div>
<div class="l-item">b</div>
<div class="l-item">b</div>
</div>
<div>
<div class="l-item">x</div>
<div class="l-item">y</div>
<div class="l-item">z</div>
<div class="l-item">z</div>
<div class="l-item">z</div>
<div class="l-item">x</div>
</div>
<div>
<div class="l-item">1</div>
<div class="l-item">2</div>
<div class="l-item">3</div>
<div class="l-item">4</div>
<div class="l-item">4</div>
<div class="l-item">4</div>
</div>
</div>
My requirement is to merge similar valued and sibling DIVS into single DIV as colspan. For that I have an approach like below
$('#head > div').each(function(){
$(this).find('.l-item').each(function(){
var txt = $(this).text();
$(this).siblings().filter(function(){
return $(this).text() == txt;
});
});
});
It seems like it will mess with the DOM, any other solution for this please..

Try this out:- http://jsfiddle.net/adiioo7/rnL3h/
JS:-
$('#head > div').each(function () {
$(this).find('.l-item').each(function () {
var txt = $(this).text();
var items = $(this).siblings().filter(function () {
return $(this).text() == txt;
});
if (items.length > 0) {
$(this).width($(this).width() * (items.length + 1));
items.remove();
}
});
});

Here's a little bit of help to get you started: http://jsfiddle.net/WeJmu
$('#head > div').each(function(){
$(this).find('.l-item').each(function(){
var txt = $(this).text();
var num_eaten = 0;
$(this).siblings().each(function () {
if ($(this).text() === txt) {
num_eaten++;
$(this).remove();
}
});
if (num_eaten > 0) {
$(this).width($(this).width() * (num_eaten + 1));
}
});
});

different approach with next, you can develop it with better way. demo
$('#head > div').each(function(){
$(this).find('.l-item').each(function(){
var txt = $(this).text();
if( $(this).next().text() == txt){
$(this).next().width($(this).next().width() + 20);
$(this).remove();
}
});
});

if by appearance you want consecutive divs with same text to look like a single div/column;
http://jsfiddle.net/WeJmu/2/
$('#head > div').each(function(){
$(".l-item").each(function(){
var $this=$(this);
var $next=$(this).next();
if( $this.text()==$next.text()){
$this.css({'border-right':'none'});
$next.css({'border-left':'none'});
}
});
});

jQuery: How to append something after one element?

DOM
<div id="a">
<div id="b"></div>
<div>
<p>Insert me after #b</p>
Requirement is insert p tag after '#b', and when the insert operation happened again, only replace the p tag instead of adding more.
Thanks for your help

This will insert it directly after #b, within #a, but if it already exists, then it wont insert it again.
$(document).ready(function(){
if ($('#newP').length == 0) {
$('#b').append('<p id="newP">Insert me after #b</p>')
}
});

Try this:
function insertP(html)
{
var a = $("#a");
var p = a.find("p")
if(p.length == 0)
{
p = $("<p></p>").appendTo(a);
}
p.html(html)
}

This function will remove an existing element then add a new element. If one does not exist it will simply add the element.
<body>
<script type="text/javascript">
$(document).ready(function() {
function addAfterB(pElement) {
if (!$('#b ~ p')) {
$(pElement).insertAfter('#b');
} else if ($('#b ~ p')) {
$('#b ~ p').remove();
$(pElement).insertAfter('#b')
}
}
addAfterB('<p>New Item 1</p>');
});
</script>
<div id="a">
<div id="b"></div>
<p>hello</p>
<div>

You can use $.after()...
<div id="a">
<div id="b"></div>
<div>
...
<script>
$("#b").after("<p>Insert me after #b</p>");
</script>