jquery - 从jquery中隐藏的ul中选择li

Question

我正在尝试选择一个已隐藏但可以使用滑动切换方法显示的列表项。

这是HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li id="par1">parent 1</li>
    <ul id="par1list">
      <li>items to select1</li>
      <li>items to select2</li>
      <li>items to select3</li>
    </ul>
  <li id="par2">parent 2</li>
    <ul id="par2list">
      <li>items to select1</li>
      <li>items to select2</li>
      <li>items to select3</li>
    </ul>
</ul>

在 jquery 中，我隐藏了子父列表（par1list 和 par2list），但是当单击父 1 或父 2 时它们会滑动切换。这是jQuery：

$(document).ready(function(){
    $("#par1list, #par2list").hide(); //hide elements

    $("#par1").click(function() {
        $("#par1list").slideToggle(400); //click parents to show hidden elements
    });
    $("#par2").click(function() {
        $("#par2list").slideToggle(400); //click parents to show hidden elements
    });

    $("#par1list > li").click(function(){  //select list item from previous hidden ul
        this.css('color', 'red');
    });
});

我正在尝试从 ul par1 中选择一个列表项，但我无法弄清楚。谢谢！

Answer 1

如果我理解正确，您需要使用$(this)而不是this

演示

$("#par1list > li").click(function(){  //select list item from previous hidden ul
    $(this).css('color', 'red');
});

Answer 2

我知道这个已经有一个很好的答案，但我想补充说明它为什么会这样工作：“this”是一个 DOM 元素。像“hello”，所以为了使用 jQuery，你首先需要将它包装在一个 jQuery 对象中，执行 $(this).

希望这会有所帮助。