更新

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>

Answer 2

你可以在线css和js代码的帮助下实现这一点，如下所示：

<script>
$(document).ready(function(){
    var length = $('ol li').length;
    for(i=1;i<=length;i++){
        $('ol li:nth-child('+i+')').children('span').html('('+i+') ');
    }
});
</script>


And HTML:

<body>

<ol>
    <li><span class="list_number"></span>Stone</li>
    <li><span class="list_number"></span>Paper</li>
    <li><span class="list_number"></span>Scissor</li>
</ol>

</body>

My CSS:


<style>
ol { list-style-type:none; }
</style>

Hope This is Helpful

Answer 3

先生，您只需要使用：

$(document).ready(function() {
    var ol = $('ol li');
    ol.css("list-style", "none");

    $.each(ol, function(i, el){
        $(el).text('(' + (i + 1 )+') ' + $(el).text());
    });

});

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

3 个答案:

更新