Как найти предыдущий элемент из $ (this)?

Question

Как получить значение $(.subname) при нажатии на кнопку .bigadminbutton - функция updateSub ().Перепробовал все (все комбинации prev, sibiling, parent, children, find ...), но безуспешно.Я теряю слишком много времени на эту простую вещь.

<div class='subdiv'>
     <input type='text' class='subname' value='Prva' />
     <a class="bigAdminButton"  href="#" onclick="updateSub()">
        <span class="bigAdminButtonText adminButtonText btnFix">Update</span>
     </a>
</div>

Answer 1

Полагаю, я не уверен, почему .prev() не работает. Кажется, здесь:

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

http://jsfiddle.net/UQBrp/

Упс. Забыл упомянуть, что я передаю $(this) функции.

<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/

И просто передача this в функцию updateSub(), с $() в функции:

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

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

Answer 2

Я не очень понимаю, почему вы смешиваете jQuery с javascript ... если вы используете jQuery, то делаете jQuery по-другому. Зачем вам использовать «onclick», хотя вы могли бы сделать это:

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

Приведенный выше пример отлично работает в js fiddle. вот ссылка . Не путайте себя, смешивая все. Надеюсь, это поможет.

Answer 3

Я изменил ваш код, чтобы вам не приходилось использовать onclick для передачи параметров.В общем случае не стоит использовать чистые обработчики событий и смешивать их с jQuery.jQuery гарантирует, что вы получите наилучшую кросс-браузерную обработку событий.Обратите внимание на элемент data-id.Вместо использования обработчика onclick для передачи информации вы можете объявить атрибут «data- *» в теге html, чтобы прикрепить к нему информацию метаданных, а затем получить доступ к этой информации из обработчика событий jQuery.Затем обработчик событий может получить идентификатор следующим образом:

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

ссылка jsFiddle: http://jsfiddle.net/cgencer/eU8d9/9/

Вы также можете использовать $(this).prev() для кода выше, но это более чувствительно,в случае, если вы добавите другой элемент между ними или измените порядок элементов.

Answer 4

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

Answer 5

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

Answer 6

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

Если это повторяющийся блок кода, где эти классы используются снова, вы можете использовать:

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