更改列表项的外观，使它们看起来像表格一样的列

Question

我有一个li标签列表，每个项目都有标题和说明。

<ul>
  <li>$title[0] $description[0]</li>
  <li>$title[1] $description[1]</li>
  ...
  <li>$title[n] $description[n]</li>
</ul>

我希望它们对齐，以便它们看起来像表格中的列，如下例所示：

$title[0]    $description[0]
$title[1]    $description[1]
...
$title[n]    $description[n]

Answer 1

我假设您的问题中有一个li元素列表，并且每个要输出textn，其中n是列表中项目的从一开始的索引。如果是这样......

$("li").each(function(i) { 
  $(this).text("text"+(i+1)); 
});

编辑为了回答您的更新问题，您可以使用类似的内容执行此操作。

$("li").each(function() { 
  // Use regular expressions to extract the numerical index from the text... 
  // This appears to be what you intend from your question
  var index = $(this).text().replace(/title(\d+)/, "$1");
  // Append an element containing the description to the li element
  $(this).append("<span class=\"col2\">description-" + index + "</span>"); 
});

然后使用CSS来定位，比如......

/* Used to stop float overflowing the list item */
li { overflow: hidden; }
/* Float the col2 element to the right with a consistent width so
 * all col2 elements appear aligned */
li .col2 { float: right; width: 25%; }

<击>

编辑忽略上面的JavaScript，我认为你只需要HTML和CSS。要使列表显示为表格...

<li>
    <span class="col1">Title 1</span>
    <span class="col2">Description 1</span>
</li>

然后使用浮动来定位项目，它将无法完全按照表格的方式工作，因为表格会自动划分空间，但它可能会产生您需要的效果。上面的CSS示例是一种方法，您可以使用相反的浮动...

li { overflow: hidden; /* Row level styling */ }
li .col1 { float: left; width: 75%; }
li .col2 { float: right; width: 25%; }

或者您可以将浮动堆叠在一起

li { overflow: hidden; /* Row level styling */ }
li .col1 { float: left; width: 25%; }
li .col2 { float: left; width: 50%; }
li .col3 { float: left; width: 25%; }

我做了一个小提琴... http://jsfiddle.net/g8Xkp/

Answer 2

您的意思是要删除列表的列表样式吗？然后像这样使用CSS：

ul {
   list-style: none;
}

Answer 3

这将允许您修改列表中每个LI元素的文本。如果您有多个选择器，则应调整选择器以定位特定列表，因为目前这将定位页面中的所有LI元素。 （即$('li.menu')）

$('li').each(function(index, element){ 
   //Amend each element here
   $(element).text('new text');
});