jQuery中li标签的动态缩进

-3

我想动态缩进我的列表标签，因为它在CSS中可能很乏味，所以我认为它可以在jQuery中完成。jQuery中li标签的动态缩进

这是如何实现的？

我有这个大的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

来源

2016-11-08 nCore

你能解释为什么不在css中做到这一点？ – Dekel

哪个是css的难题https://plnkr.co/edit/LKfT7D3QdH91hJPN4hxj?p=preview ... – DaniP

因为它不是一个静态值，'li'只是包装来自ajax调用和数据的数据可以很大。 – nCore

如果你想要做的是缩进一切这是在李标签，无需使用jquery ，你可以很容易地通过CSS缩进它们。

li { 
padding-left: 20px; 
}

来源

2016-11-08 16:04:34 borbesaur

在这里得到了我的投票:) css是正确的解决方案，而不是jQuery。 – Dekel

您代码中的具体问题是语法错误。

机会，这：

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

要这样：

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

或者

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

不过我真的不认为jQuery是这里的解决方案。你应该使用 CSS（检查@borbesaur的答案）。

来源

2016-11-08 16:08:20 Dekel

公平的感谢:)是啊，猜测用CSS的坏棍子。 – nCore

也有我的投票。很高兴能有相互恭维的答案。 – borbesaur

jQuery中li标签的动态缩进

回答

相关问题