jQuery中li标签的动态缩进

Question

我正在尝试动态缩进我的列表标签,因为在CSS中执行它可能很乏味,所以我认为它可以在jQuery中完成.

怎么能实现这一目标？

我有这个大的ul li嵌套标签,并试图缩进这个HTML,虽然它可以只是一个ul li标签.

<ul>
  <li><p>lorem ipsum dolor</p></li>
  <li><p>lorem ipsum dolor</p>/li>
</ul>

要么

<div id="student">
  <h3>Names</h3>
  <li>
    <p>lorem ipsum dolor</p>
</li>
<li>
    <p>lorem ipsum dolor</p>

    <ul>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
            <ul>
                <li>
                    <p>lorem ipsum dolor</p>
                </li>
                <li>
                    <p>lorem ipsum dolor</p>
                </li>
                <li>
                    <p>lorem ipsum dolor</p>
                    <ul>
                        <li>
                            <p>skjut in mig!</p>
                        </li>
                        <li>
                            <p>skjut in mig!</p>
                        </li>
                        <li>
                            <p>skjut in mig!</p>
                            <ul>
                                <li>
                                    <p>mmm dolor</p>
                                </li>
                                <li>
                                    <p>mmm ipsum dolor</p>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <p>skjut in mig!</p>
                        </li>
                        <li>
                            <p>skjut in mig!</p>
                        </li>
                    </ul>
                </li>
                <li>
                    <p>lorem ipsum dolor</p>
                </li>
                <li>
                    <p>lorem ipsum dolor</p>
                </li>
            </ul>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
        <li>
            <p>lorem ipsum dolor</p>
        </li>
    </ul>
</li>
<li>
    <p>lorem ipsum dolor</p>
</li>
<li>
    <p>lorem ipsum dolor</p>
</li>
<li>
    <p>lorem ipsum dolor</p>
</li>
<li>
    <p>lorem ipsum dolor</p>
</li>
<li>
    <p>lorem ipsum dolor</p>
</li>
</div>

jQuery的:

$("li").each(function() { 
  $(this).css("padding-left": 20);
});

演示

Answer 1

如果你想要做的就是缩进li标签中的所有内容,不需要使用jquery,你可以很容易地通过css缩进它们.

li {
padding-left: 20px;
}