围绕每两个不能正常工作的项目包装标签

I am trying to wrap a div around every two elements I am looping with php but I am not getting the desired output.

Below my PHP code:

<?
$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;
?>

And this is the output that I am getting from that code:

<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>

While this is what I want:

<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>

How can I get that output? Even when there are an uneven amount of items being loaded?

This is what I am currently working on (the slider is not working without problems as you can see).

This is almost a copy of the website where the slider does work (the reason I am not copying that is because it is outdated/messy code).

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
duanlian1978 2018-01-17 10:49
关注
The approach with modulo is correct, but you are writing duplicate opening tags.
the first usage is okay:

//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">'; }

The second usage you should only put a closing tag:

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>'; }

Then you have another usage outside your while loop. This looks okay too.

if(($tel % 2) != 0){ $dienstenslider .= '</div>'; }
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

围绕每两个不能正常工作的项目包装标签 html php sql
2018-01-17 10:40

回答 1 已采纳 The approach with modulo is correct, but you are writing duplicate opening tags. the first usage i
在字符串中查找数字并围绕每个数字换行 php
2014-08-09 11:48

回答 3 已采纳 Since it is a table of content, I assume that the number you are looking for is the first number o
如何获得围绕中心坐标和半径的N个坐标 php swift
2018-05-02 11:46

回答 2 已采纳 you can use the Great-circle_distance calculation to get the points. I first calculate the bear
前端技术提升
2023-02-13 16:39

Michael18811380328的博客前端技术提升前端可以从哪些角度提升？ https://www.zhihu.com/question/425782106 作者：邵锁链接：https://www.zhihu.com/question/425782106/answer/1543007211 来源：知乎著作权归作者所有。商业转载请联系...
cesium 圆锥体绕某一个点翻转一个角度如何实现 3d javascript 前端有问必答
2022-04-09 18:11

回答 2 已采纳几何体旋转都是以几何原点为基准旋转的 cesium提供的圆锥体几何原点是几何体中心不是圆锥顶点,这里可以使用primitive-geometry重新构建出以顶点为原点的几何体进行绘制然后进行旋转变换
如何在下拉列表中围绕php数组值包装optgroup标签 php
2012-10-29 20:53

回答 2 已采纳 For sorted array: $interval = ''; $prev_interval = ''; foreach($selection as $slot) { // Ch
U3D 脚本物体绕着目标物体旋转在两个位置不断变动 unity
2018-11-29 06:31

回答 1 已采纳搞懂了，因为有LookAt这句面向的语句，如果用+distance，经过这句就会反向。而-distance就是把面向这句导致反向的效果抵消。
2020 年前端技术发展盘点
2021-03-30 08:36

三钻的博客 2020 年已经结束，这一年里面因为疫情，...了解这些新的技术和趋势，有效让我们成为更好的开发者，同时在我们日常工作中，这些知识有效帮助我们去解决工作中的技术问题，或者在一个问题中看到更多的解决办法和可能性。
unity 如何让子物体始终围绕父物体并保持在两点之间的垂直方向上？ unity
2022-06-15 20:49

回答 2 已采纳你默认设置炮台在玩家周围不就可以了?垂直方向的话你需要求得两点之间的向量，取与该向量的垂直分量
如何围绕下一个偶数？ php
2015-12-18 20:33

回答 1 已采纳 $num = ceil($input); // Round up decimals to an integer if($num % 2 == 1) $num++; // If odd, add o
datatables的一个特殊需求，请熟悉datatables的朋友接单哈。 ajax jquery 前端框架
2021-09-10 20:28

回答 1 已采纳大概如下，由于多选的话没法判断用户是否已经选择完毕，需要使用按钮来实现查询功能，有帮助记得点个采纳，谢谢~ 2021-9-11 14:01代码更新 <table id="example" cl
大前端高频面试题详解确定不看看？（持续更新）
2023-05-28 14:57

星辰大海1412的博客在前端面试中，除了要求掌握 HTML、CSS、JavaScript 等基础知识外，还需要对框架、工具、技术栈等有深入的理解和...针对这样的需求，我准备了一篇前端面试文章介绍的简介，希望能够帮助读者更好地了解前端面试的内容。
使用php在推文中围绕推特用户名包装html <a>标签 php twitter
2010-11-23 23:29

回答 2 已采纳 Try this: <?php $username = 'benpaton'; $format = 'json'; $tweet = json_decode(file_get_conte
网络编程资源大集合(包含前端、java、linux、安卓、github开源项目、开发工具等)
2018-03-14 11:10

love666666shen的博客安卓各组件介绍一、ListView二、ActionBar三、Menu四、ViewPager 、Gallery五、GridView六、ImageView七、ProgressBar八、其他2.GitHub上优秀Android开源项目3. Android开发神器1.Xabber客户端2.oschina客户端3.手机...
前端最全面试题整理（持续更新）
2023-02-17 23:56

胡肖一的博客此文章的题是同事给我发的一个PDF文档里的题，原版我也不清楚是哪里的，好像是某个培训机构的题库。题比较全，但是原版很多题的答案不是很清晰，在此基础上我重新补充了一下
没有解决我的问题, 去提问

悬赏问题

¥15 素材场景中光线烘焙后灯光失效
¥15 请教一下各位，为什么我这个没有实现模拟点击
¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
¥20 有关区间dp的问题求解
¥15 多电路系统共用电源的串扰问题
¥15 slam rangenet++配置
¥15 有没有研究水声通信方面的帮我改俩matlab代码
¥15 ubuntu子系统密码忘记
¥15 保护模式-系统加载-段寄存器

围绕每两个不能正常工作的项目包装标签

1条回答 默认 最新

悬赏问题

1条回答默认最新