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);
});

Demo

Answer 1

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

li {
padding-left: 20px;
}

Answer 2

您的代码中的特定问题是语法错误。

有机会：

$(this).css("padding-left": 20);

对此：

$(this).css("padding-left", 20);

或者

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

但是我真的不认为jquery就是这里的解决方案。您应该使用 CSS（请查看@borbesaur的答案）。

jQuery中li标签的动态缩进

2 个答案: