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

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'); 
});