0

Подскажите как подсчитать кол-во объектов li в ul списке и вывести в секцию выше результат

    <div class="container">
    <div class="row mt">
    <div class="col-lg-9">
        <p>Суда выгрузить --> 0000</p>
    </div>
  </div>
</div>

<!-- PORTFOLIO SECTION -->
<div id="portfolio">
    <div class="container"
        <div class="row mt">
            <ul class="grid effect-2" id="grid">
                <!-- эти подсчитать  --><li><a href="proj/p5.html"><img src="assets/img/portfolio/1.jpg"></a></li>
            </ul>
        </div>
    </div>
</div>

2 ответа 2

1

Можете использовать jQuery size:

$(document).ready(function(){
var counts = $('#grid li').size();
$('.col-lg-9 p').text('Необходимый текст: '+counts);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row mt">
    <div class="col-lg-9">
        <p>Суда выгрузить --> 0000</p>
    </div>
  </div>
</div>

<!-- PORTFOLIO SECTION -->
<div id="portfolio">
    <div class="container"
        <div class="row mt">
            <ul class="grid effect-2" id="grid">
<li><a href="proj/p5.html"><img src="assets/img/portfolio/1.jpg"></a></li>
<li><a href="proj/p5.html"><img src="assets/img/portfolio/1.jpg"></a></li>
<li><a href="proj/p5.html"><img src="assets/img/portfolio/1.jpg"></a></li>
<li><a href="proj/p5.html"><img src="assets/img/portfolio/1.jpg"></a></li>
            </ul>
        </div>
    </div>
</div>

2
  • А если перед счетчиком добавить текст то как это сделать? я попробовал так, но чет такое $('.col-lg-9 p').text('ывывывывывывывы', counts); Commented 23 окт. 2017 в 15:02
  • @dratata2501 - вам необходимо соединить string и var, в javascript это делают через "+" , обновил свой ответ
    – Арсен
    Commented 23 окт. 2017 в 15:04
1

Ну для начала добавим хотяб id в <p id="putLiCountHere">0000</p>

А теперь уже можно творить. Вот пример кода для VanillaJS

let p = document.querySelector('#putLiCountHere');
let count = document.querySelectorAll('#grid > li').length;
p.innerHTML = count; // Эту строку можно изменить как удобно. пример:

p.innerHTML = count + ': ' + p.innerHTML;
// Если в <p> изначально был текст abcde, то в итоге будет 123: abcde
2
  • можно ли перед счетчиком добавить текст? Этот код перебивает текст который пишу в тег p Commented 23 окт. 2017 в 15:05
  • переделал пример, если надо просто добавить цифры в конец без каких либо манипуляций, то p.innerHTML += count; Commented 23 окт. 2017 в 15:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.