2014-07-02 3 views
-1

Как я могу получить Parent Div id компонента.Получить родительский идентификатор div в jquery/javascript

Я уже ссылался на эту ссылку, но ее не работало.

jQuery get id of element by searching for it by class

Вот мой образец кода.

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      function linkClickEvent() 
      { 
       alert ($(this).parent().attr('id')); //Gives Me Undefined 
       alert($(this).closest('div').attr('id')); //Gives Me Undefined 
       alert($(this).parent().attr('id')); //Gives Me Undefined 
      } 
     </script> 
    </head> 
    <body> 
     <div id="container_1"> 
      <a href="#" onclick="linkClickEvent();" id="link_1">Container_1</a> 
     </div> 
     <div id="container_2"> 
      <a href="#" onclick="linkClickEvent();" id="link_2">Container_2</a> 
     </div> 
     <div id="container_3"> 
      <a href="#" onclick="linkClickEvent();" id="link_3">Container_3</a> 
     </div> 
    </body> 
</html> 

ответ

5

Изменить событие OnClick, в OnClick функции событий linkClickEvent передачи ток опорного элемента с помощью this:

<a href="#" onclick="linkClickEvent(this);" id="link_1">Container_1</a> 

и в функции добавления параметра принимать опорный элемент:

function linkClickEvent (element) { 
    console.log($(element).closest("div").attr("id")); 
} 
+0

не работает для меня –

+0

@ Rush.2707 проверить свою консоль браузера dev инструменты для ошибок –

1

Вы должны обработать события в своих JS-файлах. Разделение контента, стиля и поведения действительно является лучшей практикой.

Вы можете получить элемент с помощью:

$(document).on('click', '.element', function(){/*...*/}); 

А затем сохранить идентификатор атрибута щелкнул через:

var parent_id = $(this).parents('.classOfParent').attr('id'); 

или

var parent_id = $(this).parent().attr('id'); 

Кроме того, если есть сомнения, проверьте, что это такое с console.log(), который работает WAY лучше, чем alert().

Редактировать: Исправлен вопрос. Извините, теперь это правильно.

PS: Why is console.log() considered better than alert()?

0

event.preventDefault();

$("a").click(function(event) { 
event.preventDefault(); 
    $(this).parent().attr('id'); 
}); 
4

Проблема в том, что вы используете on* атрибуты подключить ваши события, this относится к window, а не щелкнул элемент. Используйте JQuery, чтобы подключить ваши события:

<div id="container_1"> 
    <a href="#" id="link_1">Container_1</a> 
</div> 
<div id="container_2"> 
    <a href="#" id="link_2">Container_2</a> 
</div> 
<div id="container_3"> 
    <a href="#" id="link_3">Container_3</a> 
</div> 
$('div a').click(function(e) { 
    e.preventDefault(); 
    var parentId = $(this).closest('div').prop('id'); 
    alert(parentId); 
}); 

Example fiddle

0

Используйте document.ready вместо OnClick атрибута.

$(document).ready(function() { 
      $('a').click(function() { 
       var id = $(this).parent().attr('id'); 
       alert(id); 
      }); 
     }); 
Смежные вопросы