Question

我正在尝试选择jquery最接近的值，但我是新手并且我的尝试没有成功。

谁能告诉我我做错了什么？任何帮助表示赞赏！

<div class="two columns">                              
 <form class="float-right">  
    <input type="hidden" id="show_id" value="329">
    <input type="hidden" id="user_id" value="172">
    <div id="follow-button" class="button small follow-call follow-show float-right">Follow</div> 
  </form>
</div>
<div class="two columns">                          
 <form class="float-right">  
    <input type="hidden" id="show_id" value="389">
    <input type="hidden" id="user_id" value="172">
    <div id="follow-button" class="button small follow-call follow-show float-right">Follow</div> 
  </form>
</div>

的jQuery

 $('.follow-show').bind('click', function() {
        var button = $(this);
        var show_id = button.closest("#show_id").val();
        var user_id = button.closest("#user_id").val();
 });

Answer 1

不要使用重复的ID，而是可以使用类，

您需要使用siblings代替closest

var button = $(this);
var show_id = button.siblings("#show_id").val();
var user_id = button.siblings("#user_id").val();

Answer 2

您不能对2个元素使用相同的ID。尝试换班。我使用jquery兄弟姐妹方法来选择。

<div class="two columns">
 <form class="float-right">  
    <input type="hidden" class="show_id" value="329">
    <input type="hidden" class="user_id" value="172">
    <a id="follow-button" class="button small follow-call follow-show float-right">Follow</a> 
  </form>
</div>

<div class="two columns">
 <form class="float-right">  
    <input type="hidden" class="show_id" value="330">
    <input type="hidden" class="user_id" value="173">
    <a id="follow-button" class="button small follow-call follow-show float-right">Follow</a> 
  </form>
</div>

Jquery的

$('.follow-show').bind('click', function() {

        var button = $(this);
        var show_id = button.siblings(".show_id").val();
        var user_id = button.siblings(".user_id").val();

        alert(show_id);
        alert(user_id);
});

这里的示例小提琴：http://jsfiddle.net/

Answer 3

Closest始终仅适用于父元素。它不会选择最接近的子元素。兄弟姐妹总是检查向下的元素。

<div id="div1">Nitin </div>
<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>

jQuery的：

$('.level-3').closest('#div1').css('background-color', 'red');
//Select nothing

$('.item-1').closest('li').css('background-color', 'red');
//Mark 1 as red

$('.item-1').closest('ul').css('background-color', 'red');
//Mark <ul class="level-3"> as red.

$('.item-1').siblings('li').css('background-color', 'green');
//Mark 2 and 3 as green`

最近的选择器jQuery

3 个答案: