从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）。

希望这会有所帮助。