Знакомство с тем, какой ребенок был нажат тегом в jquery

Question

У меня есть следующая структура DOM, основанная на щелчке h4, мне нужно получить идентификатор соответствующего виджета класса и сделать запрос на публикацию на сервер. Я немного новичок в JQuery, следовательно, изо всех сил. Может ли кто-нибудь помочь, пожалуйста?

<section id="home-sidebar" class="sidebar">
  <div class="menu">

    <div class="widget" id="4">
      <div class="title">
        <h4>First Text</h4>
        <p>Do some stuff</p>
      </div>
    </div>
    ..................................
...............

    <div class="widget" id = "56">
      <div class="title">
        <h4>N-th Text</h4>
        <p>Do some stuff</p>
      </div>
    </div>
  </div>
</section>

Как узнать, какой тег h4 был нажат в jQuery? Как я могу получить соответствующий номер "id" виджета? (Обратите внимание, что идентификаторы не являются последовательными, они также могут быть случайными)

Answer 1

Вы можете использовать .parents(), чтобы найти узел DOM с идентификатором, который вы хотите получить:

//bind a click handler to all h4 elements
$('h4').bind('click', function () {
    //find the id of the parent node that has the .widget class
    //since you are trying to get the id, you do not need to use the jQuery .attr() function which performs slower than the below code
    var id = $(this).parents('.widget')[0].id;
    $.get('path/to/server.file?id=' + id, function (data) {
       //this is the callback function for the server request
       alert('Server Response: ' + data);
    });
});

Документация для .parents(): http://api.jquery.com/parents/

Answer 2

$("h4").click(function(){  
    var  a=$(this).parent().parent().attr('id');  
    alert(a);  
})

Answer 3

$(document).ready(function(){ 
    $(".widget").click(function(){
        var id = $(this).attr("id");  //gives id
    });
});

Answer 4

Если вы сделали это:

$('h4').click(....)

Вы можете сделать это следующим образом:

$('h4').click(function(){
    alert($(this).attr('id'))
})