Скрипт считающий <div>

Тема в разделе "Как сделать...", создана пользователем stsepelin, 15 дек 2014.

  1. stsepelin

    stsepelin Постоялец

    Регистр.:
    8 сен 2011
    Сообщения:
    56
    Симпатии:
    12
    Здравствуйте!

    Хотелось бы узнать как реализовать такую задачу:

    Необходимо, чтобы скрипт считал количество блоков в <div> и добавлял +1 к вложенному блоку.
    Что-то схожее с for loop.

    Пример:

    Есть вот такой блок:
    Код:
    <div class="row">
    
      <div class="image">
        <img src="image1.png" alt="">
      </div>
    
    </div>
    Необходимо, чтобы для каждого нового блока image менялось значение у image.png:
    Код:
    <div class="row">
    
      <div class="image">
        <img src="image1.png" alt="">
      </div>
    
      <div class="image">
        <img src="image2.png" alt="">
      </div>
    
      <div class="image">
        <img src="image3.png" alt="">
      </div>
    
    </div>
     
  2. асс

    асс

    Регистр.:
    13 окт 2006
    Сообщения:
    756
    Симпатии:
    221
    Вы дали слишком мало инфы. Можно как то так


    PHP:
    <?php
    $textshort 
    = <<<EOFF
       <div class="row">

      <div class="image">
        <img src="image1.png" alt="">
      </div>

      <div class="image">
        <img src="image2.png" alt="">
      </div>

      <div class="image">
        <img src="image3.png" alt="">
      </div>
        <div class="image">
        <img src="image1.png" alt="">
      </div>

      <div class="image">
        <img src="image2.png" alt="">
      </div>

      <div class="image">
        <img src="image3.png" alt="">
      </div>
    </div>

    EOFF;
    preg_match_all('/<div class=\"image\">/'$textshort $text);
    $total count($text[0]); //Считаем количсество  <div class="image">

    for ($i 0$i <= $total$i++) {

    echo 
    $pic preg_replace('/"image(.*?)\.png/Uis',"image$i.png"$textshort);
    //echo     htmlspecialchars ($pic.'');
    }
    ?>
     
  3. SocMaster

    SocMaster aka Hakerok

    Регистр.:
    26 июл 2011
    Сообщения:
    202
    Симпатии:
    47
    Так, перед циклом сделать вывод
    <div class="row">
    в цикл запихнуть
    <div class="image">
    <img src="image'.$i.'.png" alt="">
    </div>
    в цикл добавить $i++;
    после цикла
    </div> вставить
     
  4. stsepelin

    stsepelin Постоялец

    Регистр.:
    8 сен 2011
    Сообщения:
    56
    Симпатии:
    12
    Прошу прощения, суть в том, что у меня есть интернет магазин на базе opencart 2.0
    Есть модуль, который выводит категории на главной странице.
    Вот собственно сам код вывода категории:
    Код:
    <!-- 4 Column Category Features -->
    <div class="row text-center">
      
        <?php foreach ($products as $product) { ?>
        <div class="col-md-3 col-sm-6 home-4-cat">
            <a href="<?php echo $product['href']; ?>" class="thumbnail">
                <div class="overlay"></div>
                <img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>">
                <div class="caption">
                    <h4><?php echo $product['name']; ?></h4>
                    <p><?php echo $product['description']; ?></p>
                </div>
            </a>
        </div>
        <?php } ?>
      
    </div>
    <!-- /.row -->
    Но вот незадача, все изображения категорий на сайте в горизонтальном положении, а этот модуль должен выводить изображения категорий в вертикальном виде, причем везде кроме этого модуля изображение должно быть в горизонтальном положении.
    Единственное правильное решение, к которому я пока пришел - это подменить изображения, скажем на главной будет одно изображение, а вообще у категории будет другое изображение. Конечный пользователь не будет лазить в код чтобы поменять изображение.
    Пришла мысль реализовать это таким образом:

    В коде будет к изображению присваиваться порядковый номер категории (div'а).
    Человек будет заливать изображение с именем image"порядковый номер категории (div'а)".png

    На мой взгляд, самым простым решением в этом вопросе является цикл, как предложил SocMaster

    Проблема в том, что я не знаю, как правильно написать этот цикл...
    P.S. Если есть идеи, как это реализовать проще, эффективнее или быстрее, я с радостью выслушаю :)

    P.P.S. HTML версия шаблона - http://html.jp.ee
    Opencart 2.0.1.1 - http://test.jp.ee
     
  5. Sysfaray

    Sysfaray Постоялец

    Регистр.:
    7 окт 2007
    Сообщения:
    149
    Симпатии:
    77
    Допустим
     
  6. stsepelin

    stsepelin Постоялец

    Регистр.:
    8 сен 2011
    Сообщения:
    56
    Симпатии:
    12
    Спустя несколько часов раздумий до меня наконец дошло, как сделать все красиво и без грязи в коде...
    Перед foreach нужно добавить
    Код:
    $n = 1;
    Затем в нужное место вставить
    Код:
    <?php echo $n++; ?>
    Конечный вариант:
    Код:
    <!-- 4 Column Category Features -->
    <div class="row text-center">
        <?php $n = 1; foreach ($products as $product) { ?>
        <div class="col-md-3 col-sm-6 home-4-cat">
            <a href="<?php echo $product['href']; ?>" class="thumbnail">
                <div class="overlay"></div>
                <img src="/image/catalog/category/cat<?php echo $n++; ?>.jpg" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>">
                <div class="caption">
                    <h4><?php echo $product['name']; ?></h4>
                    <p><?php echo $product['description']; ?></p>
                </div>
            </a>
        </div>
        <?php } ?>
       
    </div>
    <!-- /.row -->
    Подумать только, сколько времени убил на такой пустяк..
     
  7. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Код:
    <?php $n = 1; foreach ($products as $product) { ?>
        <div class="col-md-3 col-sm-6 home-4-cat">
            <a href="<?php echo $product['href']; ?>" class="thumbnail">
                <div class="overlay"></div>
                <img src="/image/catalog/category/cat<?php echo $n++; ?>.jpg" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>">
                <div class="caption">
                    <h4><?php echo $product['name']; ?></h4>
                    <p><?php echo $product['description']; ?></p>
                </div>
            </a>
        </div>
        <?php } ?>
    Этот код неправильный, и вот почему. Класс col-md-3 предполагает колонку шириной 3 из всего 12 на «средних» экранах — а сколько их в ряду никак не учитывается. Аналогично col-sm-6 означает «6 колонок из всего 12 на меленьких экранах». Подробнее — смотрите документацию по бутстрапу. Даже затрудняюсь сказать как этот код поведёт себя в разных браузерах.
    Да, ещё (от себя). Сейчас принято размечать карточки товаров в магазине по схеме http://schema.org/Product
    Это улучшает индексацию товаров поисковиками. И выводит их в приятном виде для пользователя.
     
  8. stsepelin

    stsepelin Постоялец

    Регистр.:
    8 сен 2011
    Сообщения:
    56
    Симпатии:
    12
    Здравствуйте!
    Я внимательно смотрел документацию по бутстрап и понимаю как он работает, мне было нужно считать блоки и по порядку присваивать им индекс, чего я и добился в итоге, мне не важно сколько в итоге будет блоков в итоге, главное чтобы им присваивалось значение.
    А вот за ссылочку спасло большое))