Solved

Jquery each function onclick problem

Posted on 2016-07-29
2
25 Views
Last Modified: 2016-07-29
Hello experts.
I need help with my js code.
I have div s with the same class mainlist , all are hidden except the first one.
I try to hide each  div and show the next one with the same class on button click.
I m trying to do this with each function to find the no hidden div but it is not working.
Any help?

$('form#Form1').on('click', 'button.nextstep', function() {
    $('div[class="mainlist"]').each(function(i, obj) {
        if (obj.css('display') !== 'none') {
            var tmp1 = obj;
        }
    });
    var tmp2 = tmp1.next('div.mainlist');
    tmp1.hide();
    tmp2.show();
});
0
Comment
Question by:Panos
2 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 41735216
You can do it very simple.
Something like this:
$('form#Form1').on('click', 'button.nextstep', function() {
	
  var current = $('div.mainlist:visible') || $('div.mainlist').first();
  current.hide().next().show();
  return false;
});

Open in new window

Of course, you still need to validate is you're at the last one already or something like that, but as per your question, this works.

Heres a working sample
0
 
LVL 2

Author Comment

by:Panos
ID: 41735230
Hi Alexandre Simões
Thank you for your help. The code is doing the job.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
safari scroll causing z-index div to bounce 1 30
JavaScript Scope issue 4 40
jqplot Pie Chart - javascript 2 40
How can I   ajax html table  rows? 20 62
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now