-2

This is my problem:

We have 5 input fields with the same class name, for example class="inputfield". By default, when the page is loaded, you only see the first. Next to the field you have a button to show the second field. When you click on it, the function showNext() is used and you will see the second field with next to it again a button to show the 3rd field etc...

What do I want to do? I have to get the last visible input field with class="inputfield".

I've already found the function last() and :visible, but when I click on the button to show the next input field, the first is still the last because I don't know how to refresh my code.

What I want to do is, every time the function showNext is called, I need to run my code so I alway have the last visible input field. I can't add code in showNext() so I need a listener and my own code to select the last visible input field.

With my code I want to add a value in the input field when the user clicks on another button that I will display. But I always need to add it to the last visible input field, that's why I need to know what the last visible field is...

Extra info: The non visible fields are already in the code with display:none. What I tried is:

  1. when I only use the $(".inputfield").last() I get the last field, but the invisible one...
  2. with $(".inputfield:visible") it's always the first that is "selected". Even if the second is now visible

Is this possible?

Printscreen of my problem: I select it with 

$(".inputfield:visible").last().css("border", "2px solid #990000");

enter image description here

Edit: I think I found a way around for my problem so I always have the last visible field. Tnx for the help.

endeka
  • 131
  • 1
  • 15
  • 4
    What's your (relevant) minimal code? Note to answerers: could you ***read*** the question, before suggesting `last()` or `:last`? – David Thomas Jun 23 '14 at 12:36
  • 2
    Just a note, given the lack of code (HTML, the relevant JavaScript/jQuery) I'm voting to close as "off-topic." – David Thomas Jun 23 '14 at 12:56
  • 1
    Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and __the shortest code necessary to reproduce it in the question itself.__ Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – Cerbrus Jun 23 '14 at 13:02

2 Answers2

1

To get the last element with classname 'inputfield':

var inputs = document.getElementsByClassName('inputfield');
var lastInput = inputs[inputs.length - 1];

To get the last visible element with classname 'inputfield', it's easier to use jQuery:

var inputs = $('.inputfield:visible').last();
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
0

Your question isin't that clear, but from what I understand, you are trying to access the last element that was visible after showNext is called.

Knowing that the last visible input is the input that precedes the currenlty visible one, you could use that logic to know what was the last visible input once showNext is called.

However, you can also simply retrieve the currently visible element before calling on showNext.

var $lastVisible = $('.inputfield:visible').last();

showNext();

Note that you can also use the same logic to get the last field that was made visible after showNext was called if you inverse the statements.

plalx
  • 42,889
  • 6
  • 74
  • 90