javascript - 仅使用 javascript 或 jquery 列出带括号的列表？

Question

我需要一个带括号的列表(<ol> 和 <ul>)。

(1) List1
(2) List2
(3) List3
(4) List4

重要的是我只需要使用 javascript 或 jQuery 而不使用外部、内部 css。

这是我的代码

$("ol").css("counter-reset", "list");
$("ol li").css("list-style", "none"); 
$("ol li:before").css({"content": "counter(list, lower-alpha) ') '", "counter-increment": "list"});

Answer 1

这可以使用伪 CSS 标记 :before 来完成，但它只适用于较新的浏览器。

ol {list-style-type: none}
li {counter-increment: step-counter}
li::before {
  content: "(" counter(step-counter) ")";
  padding-right: 10px;
}

<ol>
  <li>List1</li>
  <li>List2</li>
  <li>List3</li>
  <li>List4</li>
</ol>

更新

您提到您想要切换它。你可以这样做

$('button').click(function() {
  $('ol').toggleClass('numbered') // this toggles it
})

.numbered {
  list-style-type: none;
  padding-left: 25px;
}

.numbered li {
  counter-increment: step-counter;
}

.numbered li::before {
  content: "(" counter(step-counter) ")";
  padding-right: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>List1</li>
  <li>List2</li>
  <li>List3</li>
  <li>List4</li>
</ol>

<button>Change</button>