How to get parent element in jquery?

Question

A bit confused about how to target the following input with name client id, Tried lots of things but nothing worked !

So here I am :

<td class="main_contact">
    <input type="hidden" name="client_id" value="45">
    <label class="switch">
         <input type="checkbox">
         <span class="slider round"></span>
    </label>    
</td>

Here is what I tried as :

$('.switch input').on('change',function() {
    if (this.checked) {
        var parent_el = $(this).parents().eq(1).closest('input[name="client_id"]').val();
        // var client_id = $(parent_el[0]+' input[name="client_id"]').val();
        console.log(parent_el);
    } else {
        alert('Its UNCHECKED');
    }
});

NOTE : I want to get the value of input with name client_id while referencing it from the $(this) element so that I get only the current changed element input data not the data of every input there is?

http://api.jquery.com/parents, http://api.jquery.com/parent or or http://api.jquery.com/closest. Either way, I suggest you read the jQuery documentation for simple queries like this. — Rory McCrossan, Oct 29 '17 at 17:10

score 1 · Accepted Answer · answered Oct 29 '17 at 17:03

You can just write .parent('selector'), but in this case, you want the parent without condition and then get a sibling. (You can use .siblings('selector') for that)

$('.switch input').on('change', function() {
  if (this.checked) {
    var parentVal = $(this).parent().siblings('input[name="client_id"]').val();
    console.log(parentVal);
  } else {
    alert('Its UNCHECKED');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="main_contact">
  <input type="hidden" name="client_id" value="45">
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</td>

You got it. Thumbs up ! :) – Umair Shah Oct 30 '17 at 01:05 — Umair Shah, Oct 30 '17 at 01:05

score 1 · Answer 2 · answered Oct 29 '17 at 17:08

1

I prefer the .closest() method:

$(this).closest('.main_contact').find('[name="client_id"]').val();

Difference between jQuery parent(), parents() and closest() functions

answered Oct 29 '17 at 17:08

Martijn

15,791
4
36
68

That's great. Thank you for your answer ! – Umair Shah Oct 30 '17 at 01:05

How to get parent element in jquery?

2 Answers2