Как получить количество блоков с одинаковым классом?
Коллеги, есть сайт: "проверенноежильё.рф". В первых секциях на "Главной странице" под формой фильтров вы увидите "прогноз погоды".
Вопрос: хочу к слик-слайдеру прикрепить по одной погоде с разного города, но они туда лепятся все. Я понимаю, что это делается через цикл, но не пойму логику, как именно?
Ниже оставлю основной код:
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 шт):
Увы к сожалению нет возможности посмотреть детальнее, что именно вам нужно, но следуя вашему вопросу, чтобы получить количество элементов с одним и тем же классам можно использовать document.querySelectorAll('.some_class').length, где заменить some_class на название искомого вами класса.
Данный метод получает список всех элементов, у которых есть указанный класс, а length возвращает их количество.