Могу ли я считать элементы в одном div с помощью .length () вместо целого документа? - JQuery

0

Я только что закончил делать приятный амазонский стиль "обзор резюме" счетчик для магазина электронной торговли. Он использует часть имен файлов изображений "звезд" для подсчета отзывов с.length(), который отлично работает, но проблема заключается в том, что он также учитывает эти изображения из других разделов страницы (например, связанные продукты, добавляет в раздел корзины). В этих областях используются те же "звездные" изображения, что и раздел обзора, поэтому счетчики отключены.

например, на этой странице - http://www.siestahammocks.com.au/single-size-brazilian-hammock/ есть только два 5-звездочных отзыва и один обзор 4 звезды, но он насчитывает восемь 5-звездочных обзоров и три 4 звезды обзоры из-за раздела связанных продуктов с использованием тех же звездных изображений (далее вниз), и звезды снова используются в верхней части страницы.

Я могу исправить эту проблему, если найду способ подсчета звездных изображений на основе div, в котором они сидят, вместо того, чтобы подсчитывать их количество во всем документе.

Мне нужно, какие переменные в var count1/2/3/4/5 будут немного отличаться, я думаю.

Любая помощь была бы потрясающей. Благодарю!

Вот мой текущий скрипт:

 <script>

    $(document).ready(function(){
var count1 = $('img[src$="IcoRating1.png"]').length;
var count2 = $('img[src$="IcoRating2.png"]').length;
var count3 = $('img[src$="IcoRating3.png"]').length;
var count4 = $('img[src$="IcoRating4.png"]').length;
var count5 = $('img[src$="IcoRating5.png"]').length;
$('.revcount1').append(count1);
$('.revcount2').append(count2);
$('.revcount3').append(count3);
$('.revcount4').append(count4);
$('.revcount5').append(count5);

var reviewtotal = count1 + count2 + count3 + count4 + count5;

    var counter1 = count1 / reviewtotal *100;
    var counter2 = count2 / reviewtotal *100;
    var counter3 = count3 / reviewtotal *100;
    var counter4 = count4 / reviewtotal *100;
    var counter5 = count5 / reviewtotal *100;

    $(".counter-bar5").css("width",counter5,"px");
    $(".counter-bar4").css("width",counter4,"px");
    $(".counter-bar3").css("width",counter3,"px");
    $(".counter-bar2").css("width",counter2,"px");
    $(".counter-bar1").css("width",counter1,"px");


});
        </script>
  • 0
    Вы ищете .size() jQuery?

3 ответа

1
Лучший ответ

Что-то вроде этого вернет счетчик изображений для этого изображения только в div с идентификатором myDiv.

var count1 = $('#myDiv img[src$="IcoRating1.png"]').length;
  • 0
    Хм, это не сработало. Должен ли он быть непосредственным родителем того, где находятся изображения?
  • 0
    Нет, просто потомок этого div, дочерний селектор будет $('#myDiv>img[src$="IcoRating1.png"]') . Если вы предоставите некоторую разметку в своем вопросе, это может помочь.
Показать ещё 1 комментарий
0

$("#your-div").children().length

должен возвращать только непосредственные подсчеты детей

Здесь документ: https://api.jquery.com/children/

Цитируется из этого источника:

Метод.children() отличается от.find() тем, что.children() перемещается только на один уровень вниз по дереву DOM, а.find() может перемещаться по нескольким уровням, чтобы выбрать элементы-потомки (внуки и т.д.). Также обратите внимание, что, как и большинство методов jQuery,.children() не возвращает текстовые узлы; для получения всех детей, включая текстовые и комментарии узлов, используйте.contents().

  • 0
    Могу ли я поставить селектор имени файла изображения между скобками детей? Потому что мне нужны подсчеты каждого типа обзора. например, всего 5-звездочных обзоров, всего 4-звездочных обзоров и т. д. Какие работы основаны на типе селектора IcoRating5.png. Вы предлагаете это? - $ ("# your-div"). children ('img [src $ = "IcoRating1.png"]'). length
0

Ваши звездные изображения вложены в <h4> с классом "ReviewTitle", поэтому вы можете сделать $('.ReviewTitle > img[src$="IcoRating5.png"]').length, вместо создания нового div с новый класс или идентификатор. Это приведет к возврату детей из.ReviewTitle, а затем выберите изображение, как вы уже сделали. Это немного более компактно, чем .children() тоже. Я тестировал его на вашей странице, и, похоже, он работает очень хорошо.

  • 1
    Спасибо за ваш вклад приятель. Я фактически закончил тем, что использовал это var count1 = $ ('ol.ProductReviewList img [src $ = "IcoRating1.png"]'). Length; что похоже на то, что вы предлагаете - нет необходимости в дополнительных элементах div или классах, так как они уже использовали этот. Приветствия.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню