Jquery selector — how to select the first of specified parents of current element

Question

All, I am a newbie of Jquery, I can apply the jquery with the basic usage. But I am not professional of it . I am stucking with this question .Please help me to review it .thanks.

Say you have the source html code like this.

...
    <fieldset class="ui-helper-reset">
    <ul>
        <li>
            <label>Select Layout Template:</label>
            <span class="spanSelectedLayout"></span>
        </li>
        <li>
            <ol class="layoutThumbneil ui-selectable">
                <li class="ui-state-default ui-selectee">
                    <img class="ui-selectee" src="designer/templates/thumbnails/NullTemplate.PNG" alt="">
                </li>
                <li class="ui-state-default ui-selectee ui-selected">
                    <img class="ui-selectee" src="designer/templates/thumbnails/2RowsTemplate.PNG" alt="">
                </li>
                <li class="ui-state-default ui-selectee">
                    <img class="ui-selectee" src="designer/templates/thumbnails/2ColsTemplate.PNG" alt="">
                </li>
            </ol>
        </li>
    </ul>
    </fieldset>
...

If the current element is the one of the li of the ol , and I want to select the ul element, let's say that it means the first specified parent of current element. basically , I can make it like below.

$(".layoutThumbneil li").bind("click",function(){alert($(this).parent().parent().parent().html());})

But this code look like verbose, so my question is Is there any simple way or other selector syntax which I didn't know instead of using parent() to make it easily? thanks.

Answer 1

You can use .closest() method:

$(".layoutThumbneil li").on("click",function() {
     var html = $(this).closest('ul').html();
});

Answer 2

you can use parents with selectors, but you should give id to ul elements, if they are important.

change function() { .. } to

function(){ alert($(this).parents('ul') .. )}

Answer 3

You can try to do this (it will select the parent ul element):

$(".LayoutThumbneil li").bind("click", function() {
    alert($(this).parents("ul").html());
});

Answer 4

The selector should be .layoutThumbneil li and not .LayoutThumbneil li given your HTML.

Try:

$(".layoutThumbneil li").bind("click", function () {
    console.log($(this).closest("ul").html());
});

Fiddle here

Answer 5

Try using jQuery's .parents() to go up the tree in conjunction with jQuery's .find() to go back down the tree.

$(".layoutThumbneil li").bind("click", function() {
  var parent = $(this).parents('.ui-helper-reset');
  var first_ul = parent.find('> ul');
});

Answer 6

use closest like this..

$(".LayoutThumbneil li").bind("click",function(){
    alert(
        $(this).closest('ol') // this is to check if it has a parent ol
          .closest('ul').html()
    );
})