Question

我有一个HTML列表。有几个嵌套的ul和li。当我点击li时，我想在li标签中找到一个最深的项目，里面没有ul标签，li是该组的最后一项。例如follow this link for example

这是我的HTML代码。

这是我的方法。

bindable({
  name:'myProperty',
  attribute:'my-property',
  changeHandler:'myPropertyChanged',
  defaultBindingMode: bindingMode.oneWay,
  defaultValue: undefined
})

我的解决方案是选择最后一个但不是最深的。

我是jquery的初学者。

Answer 1

使用while继续寻找降序ul，当它找不到更多时，选择其中的最后一个列表项并应用CSS：

$('.liclk').click(function(){
    var $current = $(this).find('ul'),
        $desc = $current;
    while($desc.length){
        $current = $desc;
        $desc = $current.find('ul');
    }
    $current.find('li').last().css('background-color' ,'red')
});

JSFiddle

Answer 2

这样的事情应该可以解决问题...

{{1}}

Answer 3

看起来你是在具有最大深度的最后一个项目的元素之后（所以如果有两个具有相同深度的项目但是在不同的ul中找到你想要的最后一个项目）。你可以循环遍历没有li的所有ul并保存最后一个父母数量最多的$('.liclk').click(function() { var parentCount = 0; var $deepEl; $(this).find("li:not(:has(ul))").each(function(index, me) { if ($(me).parents().length >= parentCount) { parentCount = $(me).parents().length; $deepEl = me; } }); $($deepEl).css("background-color", "red"); });。一旦你完成了所有事情，只需应用你的CSS。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level-1">
  <li class="item-i liclk">I</li>
  <li class="item-ii liclk">II
    <ul class="level-1-1">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-1-1-1">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii liclk">III
    <ul class="level-2">
      <li class="item-4 ">4</li>
      <li class="=item-5 ">5
        <ul class="level-2-1">
          <li class="item-5-1">5.1</li>
          <li class="item-5-2">5.2</li>
        </ul>
        <li class="item-5-2">5.3</li>
      </li>
    </ul>
  </li>
</ul>

    {
  "ecmaFeatures": {
    "jsx": true
  },
  "env": {
    "browser": true,
    "node": true,
    "jquery": true
  },
  "rules": {
    "quotes": 0,
    "no-trailing-space": 0,
    "eol-last": 0,
    "no-unused-vars":0,
    "no-underscore-dangle":0,
    "no-alert": 0,
    "no-lone-blocks": 0
  },
  "globals": {
    jQuery: true,
    $ : true
  }
}

使用jquery查找ul li列表中任何li块中最深和最后的li？

3 个答案: