Как получить количество блоков с одинаковым классом?

Коллеги, есть сайт: "проверенноежильё.рф". В первых секциях на "Главной странице" под формой фильтров вы увидите "прогноз погоды".

Вопрос: хочу к слик-слайдеру прикрепить по одной погоде с разного города, но они туда лепятся все. Я понимаю, что это делается через цикл, но не пойму логику, как именно?

Ниже оставлю основной код:

function convertStatus(input){
  var dict={
    "clear":"ясно",
    "partly-cloudy":"малооблачно",
    "cloudy":"облачно с прояснениями",
    "overcast":"пасмурно",
    "partly-cloudy-and-light-rain":"небольшой дождь",
    "partly-cloudy-and-rain":"дождь",
    "overcast-and-rain":"сильный дождь",
    "overcast-thunderstorms-with-rain":"сильный дождь, гроза",
    "cloudy-and-light-rain":"небольшой дождь",
    "overcast-and-light-rain":"небольшой дождь",
    "cloudy-and-rain":"дождь",
    "overcast-and-wet-snow":"дождь со снегом",
    "partly-cloudy-and-light-snow":"небольшой снег",
    "partly-cloudy-and-snow":"снег",
    "overcast-and-snow":"снегопад",
    "cloudy-and-light-snow":"небольшой снег",
    "overcast-and-light-snow":"небольшой снег",
    "cloudy-and-snow":"снег"
  }
  return dict[input];
}
function convertWindDirection(input){
  var dict={
      "nw":"северо-западное",
      "n":"северное",
      "ne":"северо-восточное",
      "e":"восточное",
      "se":"юго-восточное",
      "s":"южное",
      "sw":"юго-западное",
      "w":"западное",
      "с":"штиль"
      }
  return dict[input];
}
function ajaxSend(lat,lon,cityCurrent){
  $.ajax({
      url: 'pogoda.php',
      data: {
        lat:lat,
        lon:lon
      },
      type: 'POST',
      success: function(data) {
          var dataTemp={}
          dataTemp=JSON.parse(data);
          var responseFact=dataTemp.fact;
          console.log(dataTemp);
          var imgAddress='https://yastatic.net/weather/i/icons/blueye/color/svg/'+responseFact.icon+'.svg';
          //заготавливаем строку для того чтобы в img теге открывать иконки погоды
          var stringDisplay='<div class=city>';
          imgAddress='<div class=photoHolder style=`height:50px;width:50px;`><img width=`20px` height=`20px` src=\"'+imgAddress+'\" /></div>';
          //прописываем html теги как текст,тут конкретно в блоке класса photoHolder находятся img теги,которые берут изображение с указанной ссылки
          stringDisplay+=imgAddress;
          var dayTime=responseFact.daytime;
          if(dayTime=='d'){
            dayTime='День';
          }else{
            dayTime='Ночь';
          }
          //все данные по погоде внутри тега параграфа
          stringDisplay+='<span class=currentTemperatureFirst><h3>Текущая погода для города '+cityCurrent+'</h3>'+convertStatus(responseFact.condition)+'<br>'+dayTime+'<br></span>';
          stringDisplay+='<span class=currentTemperatureSecond>Температура:'+responseFact.temp+'<br></span>';
          stringDisplay+='<span class=feelsLike>Температура чувствуется как:'+responseFact.feels_like+'<br></span>';
          stringDisplay+='<span class=waterTemperature>Температура воды: '+responseFact.temp_water+'<br></span>';
          stringDisplay+='<span class=wind>Ветер: '+responseFact.wind_speed+' м/с '+convertWindDirection(responseFact.wind_dir)+'</span>';
          stringDisplay+='</div>';
          //тут заканчивается параграф
          $('.slide-weather__items').append(stringDisplay);//внутри блока с id content в том list.php добавляем(не заменяем,а добавляем ту строку с хтмл что заготовили ранее)
          //window.weatherArr.push(stringDisplay);
     }
  });

}
<?php
if(isset($_POST['lat'])&&isset($_POST['lon'])){
    $lat=$_POST['lat'];
    $lon=$_POST['lon'];
    $curl = curl_init();

    curl_setopt_array($curl, array(
        CURLOPT_URL => "https://api.weather.yandex.ru/v1/forecast?lat=".$lat."&lon=".$lon."&lang=ru_RU&limit=1&hours=true&extra=true",
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_ENCODING => "",
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 30,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => "GET",
        CURLOPT_HTTPHEADER => array(
            'X-Yandex-API-Key: 25ec9851-5193-425b-8b4b-fefb9f833c1a'
        ),
    ));

    $response = curl_exec($curl);
    $err = curl_error($curl);

    curl_close($curl);

    if ($err) {
        echo "cURL Error #:" . $err;
    } else {
        echo $response;
    }
}
?>

<html>
<head>
  <title>Тест погоды</title>
  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <meta charset="utf-8">
</head>
<body>
  <div id='content' style='height:20%;width:20%;'>

  </div>
</body>
    <script src='../js/convertToRus.js'></script>
    <script>
      var city=["Анапа","Туапсе","Сочи","Новороссийск","Геленджик"];
      $(document).ready(function() {
          //alert('hello');
          var latArr=[44.89084,44.1053,43.59917,44.72439,44.5622];//Анапа Туапсе Сочи Новороссийск Геленджик
          var lonArr=[37.3239,39.0802,39.72569,37.76752,38.0848];
          var cityCurrent='';
          for(var i=0;i<5;i++){
            console.log(latArr[i]);
            console.log(lonArr[i]);
            console.log(city[i]);
            cityCurrent=city[i];
            setTimeout(ajaxSend(latArr[i],lonArr[i],cityCurrent), 3000);

          }
        });
    </script>
</html>
<div class="slide-weather">
        <div class="slide-weather__items" id="'sliderFirst'">
        <!-- Сюда первій город -->
        </div>
        <div class="slide-weather__items" id='sliderSecond'>
        <!-- Сюда вторйо город -->
    </div>
</div>


Ответы (1 шт):

Автор решения: NocteFury

Увы к сожалению нет возможности посмотреть детальнее, что именно вам нужно, но следуя вашему вопросу, чтобы получить количество элементов с одним и тем же классам можно использовать document.querySelectorAll('.some_class').length, где заменить some_class на название искомого вами класса.

Данный метод получает список всех элементов, у которых есть указанный класс, а length возвращает их количество.

→ Ссылка