jQuery的UI選項卡和PHP回顯數據

Question

我正在使用jQuery UI的標簽

我想通過使用php從mysql數據庫中獲取選項卡來使其具有動態性，但不確定如何根據我所擁有的表的行數添加片段1，2，3。 例如，有5行，這意味着有5個片段。 這是jquery ui的html代碼。

<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img class="thumb" src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Avs38.jpg/250px-Avs38.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img class="thumb" src="http://www.crunchbase.com/assets/images/original/0007/5132/75132v1.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>  
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="image.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Loerm Ipsum</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
        </div>
    </div>

</div>

通常我會使用此php代碼來回顯數據庫

  <?php
           $rows = array();
    while($row = mysql_fetch_array( $query )){

      $rows[] = $row;

      echo "'Some html code data $row[image] test'\n";
      }

    }

    ?>

但是，如果我使用此代碼，它將生成類似html的代碼：

<div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="image.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >Loerm Ipsum</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
            </div>
        </div>
<div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="image2.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >Loerm Ipsum2</a></h2>
            <p>L2222<a href="#" >read more</a></p>
            </div>
</div>

如您所見，它不會生成第二個片段，即兩個片段。

我希望結果是這樣的：

<div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="image.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >Loerm Ipsum</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
            </div>
        </div>
<div id="fragment-2" class="ui-tabs-panel" style="">
            <img src="image2.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >Loerm Ipsum2</a></h2>
            <p>L2222<a href="#" >read more</a></p>
            </div>
</div>

那我該怎么辦呢？

Answer 1

<?php
    $rows = array();
    $frag = 1;
    while($row = mysql_fetch_array( $query )){

       $rows[] = $row;
       echo "fragment-$frag";
       echo "'Some html code data $row[image] test'\n";
       $frag++;
  }

}

?>

Answer 2

如果要談論選項卡的初始加載，請修改代碼以具有一個計數器，並將該計數器的值輸出到選項卡片段，如下所示：

<?php
    $count = 0; // Initialize counter
    $rows = array();
    while($row = mysql_fetch_array( $query )) {
        $rows[] = $row;
        echo '<div id="fragment-' . ++$count . '" class="ui-tabs-panel" style="">';
        echo "'Some html code data $row[image] test'\n";
    }
?>