javascript - How to get siblings in different DIVs or SPANs? -

i have number of forms on page, this:

<form>     <input type="hidden" name="id" value="someid1">     <div>         <span>             <input type="submit" class="submitclass">         </span>     </div>      <div>         <input type="text" name="name" class="someclass" value="name1">     </div> </form>  <form>     <input type="hidden" name="id" value="someid1">     <div>         <span>             <input type="submit" class="submitclass">         </span>     </div>      <div>         <input type="text" name="name" class="someclass" value="name1">     </div> </form> 

then have js:

jquery(document).ready(     function()     {         console.log("page loaded");          jquery(".submitclass").on("click", function() {             var id = jquery(this).siblings("input[name='id']").val();             var name = jquery(this).siblings("input[name='name']").val();              console.log(id);             console.log(name);              return false;         });     } ); 

jsfiddle: http://jsfiddle.net/sexg3/

when submit button clicked, want stop form being submitted , values of 2 inputs have next submit button.

i tried doing .siblings() function, doesn't work since inputs in different divs/spans (if put them right next each other, work).

how can accomplish this?

the elements looking not sibling of submit button.

in case suggest find form element (you can find form element in clicked button present using .closest()) , them find desired inputs fields inside using .find()

jquery(function ($) {     console.log("page loaded");      $(".submitclass").on("click", function () {         var $this = $(this),             $form = $this.closest('form');         var id = $form.find("input[name='id']").val();         var name = $form.find("input[name='name']").val();          console.log(id);         console.log(name);          return false;     }); }); 

demo: fiddle