-4

我有一个 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]
4

3 回答 3

2

我从您的问题中假设您有一个 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/

于 2012-10-08T08:28:09.670 回答
0

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

ul {
   list-style: none;
}
于 2012-10-08T08:21:13.107 回答
0

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

$('li').each(function(index, element){ 
   //Amend each element here
   $(element).text('new text');
});
于 2012-10-08T08:23:25.350 回答