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

stsepelin

stsepelin

Постоялец
Регистрация
8 Сен 2011
Сообщения
55
Реакции
13
Здравствуйте!

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

Необходимо, чтобы скрипт считал количество блоков в <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>
 
Вы дали слишком мало инфы. Можно как то так


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.'');
}
?>
 
Так, перед циклом сделать вывод
<div class="row">
в цикл запихнуть
<div class="image">
<img src="image'.$i.'.png" alt="">
</div>
в цикл добавить $i++;
после цикла
</div> вставить
 
асс написал(а):
Вы дали слишком мало инфы.
Нажмите для раскрытия...
Прошу прощения, суть в том, что у меня есть интернет магазин на базе 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

SocMaster написал(а):
Так, перед циклом сделать вывод
<div class="row">
в цикл запихнуть
<div class="image">
<img src="image'.$i.'.png" alt="">
</div>
в цикл добавить $i++;
после цикла
</div> вставить
Нажмите для раскрытия...

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

P.P.S. HTML версия шаблона - Для просмотра ссылки Войди или Зарегистрируйся Opencart 2.0.1.1 - Для просмотра ссылки Войди или Зарегистрируйся
 
Допустим
Скрытое содержимое доступно для зарегистрированных пользователей!
 
Sysfaray написал(а):
Допустим
Нажмите для раскрытия...
Спустя несколько часов раздумий до меня наконец дошло, как сделать все красиво и без грязи в коде...
Перед 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 -->

Подумать только, сколько времени убил на такой пустяк..
 
stsepelin написал(а):
до меня наконец дошло, как сделать все красиво и без грязи в коде...
Нажмите для раскрытия...
Код: 
<?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 на меленьких экранах». Подробнее — смотрите документацию по бутстрапу. Даже затрудняюсь сказать как этот код поведёт себя в разных браузерах.
Да, ещё (от себя). Сейчас принято размечать карточки товаров в магазине по схеме Для просмотра ссылки Войди или Зарегистрируйся
Это улучшает индексацию товаров поисковиками. И выводит их в приятном виде для пользователя.
 
Denixxx написал(а):
Этот код неправильный, и вот почему. Класс col-md-3 предполагает колонку шириной 3 из всего 12 на «средних» экранах — а сколько их в ряду никак не учитывается. Аналогично col-sm-6 означает «6 колонок из всего 12 на меленьких экранах». Подробнее — смотрите документацию по бутстрапу. Даже затрудняюсь сказать как этот код поведёт себя в разных браузерах.
Да, ещё (от себя). Сейчас принято размечать карточки товаров в магазине по схеме Для просмотра ссылки Войди или Зарегистрируйся
Это улучшает индексацию товаров поисковиками. И выводит их в приятном виде для пользователя.
Нажмите для раскрытия...
Здравствуйте!
Я внимательно смотрел документацию по бутстрап и понимаю как он работает, мне было нужно считать блоки и по порядку присваивать им индекс, чего я и добился в итоге, мне не важно сколько в итоге будет блоков в итоге, главное чтобы им присваивалось значение.
А вот за ссылочку спасло большое))
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху