单个PHP循环 - 将每个特定内容输出到2个独立区域。 （WordPress的）

Question

在PHP（wordpress）中，我理解如何创建一个基本循环 - 但是我不太确定如何进行单个查询并将其输出到以下两个单独的区域：

<div class="slides_container"> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a>                 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a> 
            </div> 
            <ul class="pagination"> 
                <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li> 
            </ul> 
        </div> 

基本上我需要了解如何使2个内容区域“匹配”，所以如果我要运行随机查询，＃3 Anchor将匹配UL内的＃3 Li。我需要运行“forEach”吗？

这是一个jQuery滑块，因此List元素只是主要部分的导航缩略图。

任何人都有线索？

Answer 1

我在这里做了一些假设 - 但基本上你可以使用一个foreach循环两次 - 第一次填充初始HTML“a”链接，第二次循环填充li。

例如 - 如果你的数组被称为items并且它包含每个元素的4个键值对，你可以这样做：

<div class="slides_container"> 
<?php
foreach ($items as $i) {
    ?>
    <a href="http://www.zappos.com/{$i['url_slug']}" target="_blank"><img src="img/{$i['img_name']}" width="366" alt="{$i['alt_text']}"></a>
    <?php
}
?>
</div> 
<ul class="pagination">
<?php
foreach ($items as $i) {
?>
    <li><a href="#"><img src="img/{$i['img_name']}" width="55" alt="{$i['alt_text']}"></a></li> 
    <?php
 }
 ?>
 </ul> 
 </div> 

Answer 2

使用两个循环：

<?php
$output = '<div class="slides_container"> ';
for ($i = 0; $i < count($results); $i++){
 $output .= '<a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="'.$results[$i]['imageSrc'].'" width="366" alt="'.$results[$i]['alt'].'"></a>';
}
$output .= ' </div> \n\t <ul class="pagination"> ';
for ($i = 0; $i < count($results); $i++) {
$output .= '<li><a href="#"><img src="'.$results[$i]['imageSrc'].'" width="366" alt="'.$results[$i]['alt'].'"></a></li> ';
}
$output .= '</ul> </div> ';

echo $output; 
?>

这假设你有一个结果数组：

results=array(
[0] =>array
 (
   "imageSrc"=>"some image url",
   "alt"=>"some alt text"
 )
)