jQueryのliタグの動的インデント

Question

私はリストタグを動的にインデントしようとしています。なぜなら、CSSでそれを行うのは面倒なので、代わりにjQueryで行うことができると思います。

これはどのように達成できますか？

私はこの大きなul liネストされたタグを持っているとそれだけで単一ul liタグであり得るが、このHTMLをインデントしようとしています。

<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

あなたがしたいすべてのjqueryのを使用する必要、という点でインデントすべてがのliタグにいない場合は、あなたはかなり簡単に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の答えを確認してください）。