Блог

Главная - Вопросы по программированию - Получение информации о том, какой дочерний элемент был нажат на тег в jquery

Получение информации о том, какой дочерний элемент был нажат на тег в jquery

#jquery #dom #jquery-selectors

#jquery #dom #jquery-селекторы

Вопрос:

у меня есть следующая структура DOM, основанная на щелчке h4, мне нужно получить идентификатор соответствующего виджета класса и отправить post-запрос на сервер. Я немного новичок в 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? Как мне получить соответствующий «идентификационный» номер виджета? (Обратите внимание, что идентификаторы не являются последовательными, они также могут быть случайными)

Комментарии:

1. числовые значения не являются допустимыми значениями W3 для атрибута ID. Маркеры идентификаторов и ИМЕН должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов («-«), подчеркиваний («_»), двоеточий («:») и точек («.»).

Ответ №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 /

Ответ №2:

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

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

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

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

Ответ №3:

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

Ответ №4:

 $(document).ready(function(){ 
    $(".widget").click(function(){
        var id = $(this).attr("id");  //gives id
    });
});
Метки: