如何使用Jquery查找最近的父元素属性值

Question

I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,

<ul class="Someclass">
<li><span id=3 class="heading"></span>
  <ul>
    <li>
     <ul> <li><span ><button onclick= "redirect()"></button></span</li>
     <ul>
    </li>
  </ul>
</li>
<ul>

<script type="text/javascript">
function redirect() {
    alert(....)
}
</script>

In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.

Answer 1

With your current code, pass the clicked element reference to the function like

<button onclick= "redirect(this)">asdf</button>

then

function redirect(el) {
    alert($(el).closest('.Someclass > li').children('span').attr('id'))
}

Demo: Fiddle

Bu a more recommended way will be is to use jQuery event handlers like

<button class="redirect">asdf</button>

then

jQuery(function($){
    $('.Someclass .redirect').click(function(){
        alert($(this).closest('.Someclass > li').children('span').attr('id'))
    })
})

Demo: Fiddle