-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はリスト内のアイテムの1ベースのインデックスです。もしそうならどうですか...

$("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の例はそれを行う1つの方法であり、反対のフロートを使用できます...

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 に答える