CODEWITHSUNDEEP
jquery
Callombert
Callombert

Reputation: 1099

Closest Selector jQuery

I'm trying to select a value with jquery closest but I'm a newbie and my attempts haven't been successful.

Can anyone tell me what I'm doing wrong ? Any help appreciated!

<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();
 });

Upvotes: 0

Views: 256

Answers (3)

Nitin Chaurasia
Nitin Chaurasia

Reputation: 263

Closest always works for parent elements only. It will not select closest child element. Siblings always check the downward elements.

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

Upvotes: 0

Achintha Samindika
Achintha Samindika

Reputation: 1954

You cannot use same id for 2 elements. Try to chage for class. I used jquery Siblings method to select.

<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);
});

Here the sample fiddle: http://jsfiddle.net/

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

Don't use duplicate id's, You can use class instead,

You need to use siblings instead of closest

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

Upvotes: 3

Related Questions