Question

我的数据是我作为JSON返回如下：

 {
"Text": "This is 1",
"Number": "1."
},
{
"Text": "This is 2 ",
"Number": "2."
 },
{
"Text": "This is 3 ",
"Number": "3."
},
{
"Text": "test indent",
"Number": "a."
 },
{
"Text": "test indent 2",
"Number": "b."
},
{
"Text": "insrt 1",
"Number": "i."
},
{
"Text": "back to indent ",
"Number": "c."
},
{
"Text": "This is 4 ",
"Number": "4."
}

我在HTML中用敲除显示它如下：

<div data-bind="foreach: numberedList, visible: numberedList().length > 0">
<span data-bind="text: number"></span>
<span data-bind="html: text"></span><br />
</div>

我需要添加哪些函数/代码，数据应根据数字/字母缩进？我希望HTML页面看起来如下：

谢谢

Answer 1

为了实现您想要的功能，您需要修改数据结构。你当前的数据与实现这样的事情之间没有关系，数据会有点混乱。

以下是您的数据的示例：https://jsfiddle.net/kyr6w2x3/76/

HTML：

<div data-bind="foreach:Items">
  <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
  <div data-bind="foreach:Children">
     <div class="sub-1">
         <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
     </div>
     <div data-bind="foreach:Children">
        <div class="sub-2">
           <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
        </div>
     </div>
   </div>
</div>

<强> JS：

data =  [
   {
      "Text":"This is 1",
      "Number":"1.",
      "Children":[]
   },
   {
      "Text":"This is 2",
      "Number":"2.",
      "Children":[]
   },
   {
      "Text":"This is 3",
      "Number":"3.",
      "Children":[
         {
            "Text":"test indent",
            "Number":"a.",
            "Children":[]
         },
         {
            "Text":"test indent 2",
            "Number":"b.",
            "Children":[
               {
                  "Text":"insert i",
                  "Number":"i.",
                  "Children":[]
               }
            ]
         },
         {
            "Text":"back to indent",
            "Number":"c.",
            "Children":[

            ]
         },

      ]
   }
]
function AppViewModel() {
    var self = this;
    self.Items = ko.observableArray(data);
}
var VM = new AppViewModel()
ko.applyBindings(VM);

Answer 2

以下是使用类名在css中执行此操作的方法。如果希望嵌套确定类型，可以替换ol > ol类型选择器的类名。

＆＃13;

ol.alpha {
  counter-reset: alphalist;
}

ol.alpha > li {
  list-style: none;
}

ol.alpha > li::before {
  content: counter(alphalist, lower-alpha)". ";
  counter-increment: alphalist;
}


ol.roman {
  counter-reset: romanlist;
}

ol.roman > li {
  list-style: none;
}

ol.roman > li::before {
  content: counter(romanlist, lower-roman)". ";
  counter-increment: romanlist;
}

＆＃13;

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ol class="alpha">
      <li>Item A</li>
      <li>
        Item B
        <ol class="roman">
          <li>Item I</li>
          <li>Item II</li>
        </ol>
      </li>

      <li>Item C</li>
    </ol>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

＆＃13;

Answer 3

我会创建一个变量来推送json。

var data = []; data.push({"Text": "This is 1","Number": "1."}); 然后我会创建一个函数将其返回到屏幕。你必须展示一些工作，尝试并展示你想要做的功能，MDN是一个查找信息的好地方。

格式编号为HTML的JSON列表

3 个答案: