Solved

Jquery each function onclick problem

Posted on 2016-07-29
2
39 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jquery + C#.net radiobuttonlist 3 46
ajax to record click 3 24
Jquery Bold 3 specific words in a paragraph 5 27
How do I split a variable to newline 2 20
DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

726 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