如何从 $(this) 中找到前一个元素？

Question

点击 .bigadminbutton 时如何获取 $(.subname) 的值 - 函数 updateSub()。尝试了一切（prev、sibling、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

我更改了您的代码，因此您不必使用 onclick 来传递参数。一般来说，使用纯事件处理程序并将其与 jQuery 混合并不是一个好主意。 jQuery 确保您获得最佳的跨浏览器事件处理。注意 data-id 元素。除了使用 onclick 处理程序来传递信息，您可以在 html 标记上声明一个“data-*”属性以将元数据信息附加到它，然后从 jQuery 事件处理程序中访问该信息。

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

那么事件处理器就可以得到id如下：

$("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 3

我真的不明白您为什么将 jQuery 与 javascript 混为一谈。如果您使用 jQuery，那么就一直使用 jQuery。你为什么要使用“onclick”，而你可以这样做：

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

上面的例子在 js fiddle 中工作得很好。 here is the link。不要把所有东西都混在一起来迷惑自己。希望对您有所帮助。

Answer 4

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

如果这是重复使用这些类的代码块，您可以使用：

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

Answer 5

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

Answer 6

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