How to find previous element from $(this)?

How to get the value of the $(.subname) when clicked on .bigadminbutton - function updateSub(). Tried everything (all combinations of prev, sibiling, parent, children, find...) but without any success. I am losing way too much time on this simple thing.

<div class='subdiv'>
     <input type='text' class='subname' value='Prva' />
     <a class="bigAdminButton"  href="#" onclick="updateSub()">
        <span class="bigAdminButtonTe开发者_如何转开发xt adminButtonText btnFix">Update</span>
     </a>
</div>

I guess I'm not sure why .prev() isn't working. It seems to here:

function updateSub (el) {
    alert(el.prev('input.subname').val());
}

http://jsfiddle.net/UQBrp/

Whoops. Forgot to mention I am passing $(this) to the function.

<div>
  <input type='text' class='subname' value='Prva0' />
  <div class='subdiv'>
     <input type='text' class='subname' value='Prva1' />
     <a class="bigAdminButton"  href="#" onclick="updateSub($(this))">
        <span class="bigAdminButtonText adminButtonText btnFix">Update</span>
     </a>
  </div>
  <div class='subdiv'>
     <input type='text' class='subname' value='Prva2' />
     <a class="bigAdminButton"  href="#" onclick="updateSub($(this))">
        <span class="bigAdminButtonText adminButtonText btnFix">Update</span>
     </a>
  </div>
  <div class='subdiv'>
     <input type='text' class='subname' value='Prva3' />
     <a class="bigAdminButton"  href="#" onclick="updateSub($(this))">
        <span class="bigAdminButtonText adminButtonText btnFix">Update</span>
     </a>
  </div>
  <div class='subdiv'>
     <input type='text' class='subname' value='Prva4' />
     <a class="bigAdminButton"  href="#" onclick="updateSub($(this))">
        <span class="bigAdminButtonText adminButtonText btnFix">Update</span>
     </a>
  </div>
</div>

http://jsfiddle.net/UQBrp/1/

And just passing this to the updateSub() function, with the $() in the function:

function updateSub (el) {
    alert($(el).prev('input.subname').val());
}

http://jsfiddle.net/UQBrp/3/

I changed your code so you don't have to use onclick to pass parameters. In general it's not a good idea to use pure event handlers and mix it with jQuery. jQuery makes sure that you get the best cross browser event handling possible. Note the data-id element. Instead of using the onclick handler to pass information you can declare a "data-*" attribute on the html tag to attach metadata information to it and then access that information from within the jQuery event handler.

<div class='subdiv'>
     <input type='text' class='subname' value='Prva' />
     <a class="bigAdminButton"  href="#" data-id="1">
        <span class="bigAdminButtonText adminButtonText btnFix">Update</span>
     </a>
</div>

Then the event handler can get the id as follows:

$("a.bigAdminButton").click(function () {    
     var id = $(this).attr('data-id');
     alert(id + ": " + $(this).siblings('.subname').val());
});

jsFiddle link: http://jsfiddle.net/cgencer/eU8d9/9/

You can also use $(this).prev() for the code above but that is more sensitive, in the case that you would add another element in between or change the order of the elements.

I dont really understand why you mix up jQuery with javascript..if you use jQuery then do jQuery al the way. Why would you use "onclick" while you could have done this:

$('.bigAdminButton').click(function(){
    var x = $(this).prev('.subname').val();
    alert(x);//"Prva"
})

The above example worked just fine in js fiddle. here is the link. Dont confuse yourself by mixing everything up. Hope that helps.

$('a.bigAdminButton').live('click', function () {
    alert($('input.subname').val());
});

If this is a repeated block of code where those classes are used again you could use:

$('a.bigAdminButton').live('click', function () {
    alert($(this).parent().find('input').val());
});

$("a.bigAdminButton").click(function() {
    var subnameValue = $(".subname", $(this).parent()).val();
    // (rest of your function)
});

alert($(this).parent().closest('.subname').val());