将标签包裹在每两个项目周围不起作用 php

我正在尝试用php循环的每两个元素包裹一个div，但我没有得到所需的输出。

在我的PHP代码下面：

<?
$diensten = "SELECT * FROM snm_content WHERE catid = 9 AND state = 1 ORDER BY ordering";
$dienstencon = $conn->query($diensten);
$tel = 1;
while($diensten = $dienstencon->fetch_assoc()){
if (strlen($diensten['introtext']) > 100){
$shortstr = substr($diensten['introtext'], 0, 100) . '...';
}else{
$shortstr = $diensten['introtext'];
}
//Wrap de slide in deze div elke 2 keer binnen de loop
if($tel % 2 == 1){
$dienstenslider .= '<div class="col-lg-12 col-md-12 col-sm-12">';
}
$dienstenslider .= '
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/'.$diensten['alias'].'.html">'.$diensten['title'].'</a></p>
<p class="ser-cont">
'.strip_tags($shortstr).'
</p>
<a href="info/'.$diensten['alias'].'.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>';
if(($tel % 2) == 0){
$dienstenslider .= '</div> <div class="col-lg-12 col-md-12 col-sm-12">';
}
$tel++;
}
if(($tel % 2) != 0){
$dienstenslider .= '</div>';
}
echo $dienstenslider;
?>

这是我从该代码中获得的输出：

<div class="box ser-box large-width-box-w1 box-h1">
<div id="service-owl" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 272px;">
<div class="owl-wrapper" style="width: 3120px; left: 0px; display: block; transition: all 1000ms ease; transform: translate3d(0px, 0px, 0px);">
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/begeleiding-individueel.html">Begeleiding Individueel</a></p>
<p class="ser-cont">
Begeleiding thuis is praktische hulp aan mensen die door problemen de grip op hun dagelijks leven...
</p>
<a href="info/begeleiding-individueel.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/verpleging.html">Verpleging</a></p>
<p class="ser-cont">
Thuis is de plek waar u het liefst wilt zijn. Daar voelt u zich het meest op uw gemak. In uw eige...
</p>
<a href="info/verpleging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/hulp-bij-het-huishouden.html">Hulp bij het huishouden</a></p>
<p class="ser-cont">
Als u door welke reden dan ook niet meer zelfstandig uw huishouden kunt voeren en hierbij (tijdel...
</p>
<a href="info/hulp-bij-het-huishouden.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/persoonlijke-verzorging.html">Persoonlijke verzorging</a></p>
<p class="ser-cont">
Heeft u moeite met opstaan? Kunt u zichzelf steeds moeilijker verzorgen? Of geldt dit misschien v...
</p>
<a href="info/persoonlijke-verzorging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/hulp-bij-dementie.html">Hulp bij Dementie</a></p>
<p class="ser-cont">
in ontwikkeling&nbsp;
</p>
<a href="info/hulp-bij-dementie.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Slider -->
</div>
</div>
</div>
</div>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
</div>
</div>

虽然这是我想要的：

<div class="box ser-box large-width-box-w1 box-h1">
<div id="service-owl" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 297px;">
<div class="owl-wrapper" style="width: 3120px; left: 0px; display: block; transform: translate3d(-780px, 0px, 0px); transition: all 800ms ease;">
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/begeleiding-individueel.html">Begeleiding Individueel</a></p>
<p class="ser-cont">
Begeleiding thuis is praktische hulp aan mensen die door problemen de grip op hun dagelijks leven...
</p>
<a href="info/begeleiding-individueel.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/verpleging.html">Verpleging</a></p>
<p class="ser-cont">
Thuis is de plek waar u het liefst wilt zijn. Daar voelt u zich het meest op uw gemak. In uw eige...
</p>
<a href="info/verpleging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/persoonlijke-verzorging.html">Persoonlijke verzorging</a></p>
<p class="ser-cont">
Heeft u moeite met opstaan? Kunt u zichzelf steeds moeilijker verzorgen? Of geldt dit misschien v...
</p>
<a href="info/persoonlijke-verzorging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/hulp-bij-dementie.html">Hulp bij Dementie</a></p>
<p class="ser-cont">
in ontwikkeling&nbsp;
</p>
<a href="info/hulp-bij-dementie.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slider -->
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
</div>
</div>
</div>
</div>

如何获得该输出？即使装载的物品数量不均匀？

这就是我目前正在研究的内容(如您所见，滑块无法正常工作)。

这几乎是滑块确实工作的网站的副本(我不复制它的原因是因为它是过时/混乱的代码)。

使用取模的方法是正确的，但您正在编写重复的开始标记。
第一个用法是可以的：

//Wrap de slide in deze div elke 2 keer binnen de loop
if($tel % 2 == 1){
$dienstenslider .= '<div class="col-lg-12 col-md-12 col-sm-12">';
}

第二种用法，你应该只放一个结束标签：

if(($tel % 2) == 0){
// the opening tag will be written in the first usage above. writing it here too results in duplicate opening tags
// $dienstenslider .= '</div><div class="col-lg-12 col-md-12 col-sm-12">';  
$dienstenslider .= '</div>';
}

然后，您在 while 循环之外还有另一种用法。这看起来也没问题。

if(($tel % 2) != 0){
$dienstenslider .= '</div>';
}

相关内容

最新更新

热门标签：