0

仕切り付きの jQuery Mobile リストを使用しています: http://jquerymobile.com/test/docs/lists/lists-divider.html

現在、構造は次のようになっています (A と B は仕切りです)。

<li>A</li>
<li>Adam</li>
<li>Alex</li>
<li>B</li>
<li>Bob</li>
<li>Barbara</li>

どうすれば、そのように仕切りを作らない li の周りにスパンを置くことができますか?:

<li>A</li>
  <span class="myspan">
    <li>Adam</li>
    <li>Alex</li>
  </span>
<li>B</li>
  <span class="myspan">
    <li>Bob</li>
    <li>Barbara</li>
  </span>

これらのスパンを追加するページの読み込み時に JavaScript を実行することもできますが、これは少し面倒です。これを行うことの実際的な欠点はありますか? ありがとう

更新-スパンが必要な理由は、ヘッダーをクリックすると、その下のliがアコーディオンのように少し折りたたまれるためです:http: //jqueryui.com/demos/accordion/ありがとう

4

1 に答える 1

2

何を達成しようとしていますか？

リスト分割を使用するのではなく、ディスプレイを個別のリストビューに分割することは理にかなっていますか?

<h3>A</h3>
  <ul data-role="listview" >
    <li>Adam</li>
    <li>Alex</li>
  </ul>
<h3>B</h3>
  <ul data-role="listview" >
    <li>Bob</li>
    <li>Barbara</li>
</ul>

このようにして、リストの HTML を壊すことはありません。

編集別のアプローチは、個々のリスト項目にクラスを追加して、それらがグループ化されていることを視覚的に示すことです。例えば：

<ul data-role="listview" >
     <li class="group-a">Adam</li>
     <li class="group-a">Alex</li>
     <li class="group-b">Bob</li>
     <li class="group-b">Barbara</li>
 </ul>
于 2012-04-19T15:07:20.547 に答える