2

大家好，我是jquery的新手，基本的用法我都能用jquery。但我并不专业。我坚持这个问题。请帮我复习一下。谢谢。

假设您有这样的源 html 代码。

...
    <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>
...

如果当前元素是 中的一个li，ol并且我想选择该ul元素，假设它表示当前元素的第一个指定父级。基本上，我可以像下面这样。

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

但是这段代码看起来很冗长，所以我的问题是有没有我不知道的简单方法或其他选择器语法而不是parent()用来轻松实现它？谢谢。

4

6 回答 6

2

您可以使用.closest()方法：

$(".layoutThumbneil li").on("click",function() {
     var html = $(this).closest('ul').html();
});
于 2013-03-18T02:33:05.523 回答
1

您可以与选择器一起使用，但如果它们很重要，parents您应该给id元素。ul

将 function() { .. } 更改为

function(){ alert($(this).parents('ul') .. )}
于 2013-03-18T02:33:18.363 回答
1

您可以尝试这样做（它将选择父 ul 元素）：

$(".LayoutThumbneil li").bind("click", function() {
    alert($(this).parents("ul").html());
});
于 2013-03-18T02:34:23.930 回答
1

选择器应该.layoutThumbneil li而不是.LayoutThumbneil li给定您的 HTML。

尝试：

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

在这里提琴

于 2013-03-18T02:35:05.323 回答
1

尝试使用 jQuery.parents()来上树，同时使用 jQuery.find()来回树。

$(".layoutThumbneil li").bind("click", function() {
  var parent = $(this).parents('.ui-helper-reset');
  var first_ul = parent.find('> ul');
});
于 2013-03-18T02:35:08.067 回答
1

像这样使用最近的..

$(".LayoutThumbneil li").bind("click",function(){
    alert(
        $(this).closest('ol') // this is to check if it has a parent ol
          .closest('ul').html()
    );
})
于 2013-03-18T02:37:28.013 回答