JQuery Нажмите кнопку и получите ближайший идентификатор выше:

Question

У меня есть этот html, и когда я нажимаю на кнопку, мне нужно получить ближайший идентификатор в div обертки выше

Вот HTML:

<div id="some_id_here" class="wrapper>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="toolbuttons">
        <a class="btn btn-default">click here and get the id in wrapper</a>
      </div>
    </div>
  </div>
</div>

Как мне сделатьэто?

Answer 1

Чтобы найти ближайшего родителя с идентификатором, используя JS.

function foo(ele) {
  var id = ele.closest("[id]").id;
  console.log(id)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some_id_here" class="wrapper">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="toolbuttons">
        <a class="btn btn-default" onclick="foo(this)">click here and get the id in wrapper</a>
      </div>
    </div>
  </div>
</div>

Answer 2

$ ('btn-default'). Click (function () {
var id = $ (this) .closest (". Wrapper"). Attr ("id");
console.log (id)});

Answer 3

Хотя все ответы верны, но вы можете использовать метод parent с селектором класса , чтобы найти этот div. ниже рабочий код.

 $(document).ready(function(){
     $("#btn").on("click",function(){
        console.log($(this).parents('.wrapper').attr("id"));
     })
 });

здесь работает пример

Answer 4

Вы можете сделать что-то вроде этого:

var newid = $(this).closest('div[id]');
$(this).att('id', $newid);

Answer 5

$('.btn').on('click', function(){
 let wrapperid = $(this).closest('.wrapper').prop('id')
 console.log(wrapperid)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some_id_here" class="wrapper">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="toolbuttons">
        <a class="btn btn-default">click here and get the id in wrapper</a>
      </div>
    </div>
  </div>
</div>

Answer 6

Вы можете сделать что-то вроде этого:

$('a.btn').click(function() {
  var id = $(this).closest("[id]").attr("id");
  console.log(id)
});

Демо

$('a.btn').click(function() {
  var id = $(this).closest("[id]").attr("id");
  console.log(id)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some_id_here" class="wrapper">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="toolbuttons">
        <a class="btn btn-default">click here and get the id in wrapper</a>
      </div>
    </div>
  </div>
</div>

<div id="some_id_here" class="wrapper">
  <div class="panel panel-default">
    <div class="panel-heading" id="tester">
      <div class="toolbuttons">
        <a class="btn btn-default">click here and get the id in panel-heading</a>
      </div>
    </div>
  </div>
</div>

Answer 7

Вы можете использовать closest с селектором класса и читать идентификатор, используя attr

$(function(){
   $('a.btn').on('click', function(){
      var id = $(this).closest('.wrapper').attr('id');
      console.log(id);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some_id_here" class="wrapper">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="toolbuttons">
        <a class="btn btn-default">click here and get the id in wrapper</a>
      </div>
    </div>
  </div>
</div>