$.each работа с div элементами

@Uni_programist · Регистрация: 11.08.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Стал углубляться в jQuery и столкнулся с препятствием. А суть вот в чем... Хочется написать такой скрипт который из массива JSON сверстает div блоки на ходу,как говорится, при этом не нагружая сервер лишним кодом php. Весь вечер копался в документациях и на разных сайтах и удалось кое что раскопать и добыть, но только как для каждой запись из БД отвести свой div с id="teloin" я так и не понял. При этом alert прекрасно все выводит. Вот то, что удалось написать вчера ночью:

JavaScript
1
2
3
4
5
6
7
             var divblockcount= ' ';
             var mass= newsdecode;
             $.each(mass,function(key, value){
                 alert(value.textnews);
                  divblockcount= '<div id="teloin">'+value.textnews+'</div>';
                   $("#content").html(divblockcount);
             });

mass- массив получаемый AJAX запросом
alert- успешно выводит 12 новостей(все которые есть в БД согласно запросу), а вот div выводит 1-одну новость, и мне не совсем понятно почему так происходит, когда бы в php foreach все бы успешно работало?
Буду благодарен за помощь!

@Mr_Sergo · 12.01.2019, 12:41

Uni_programist, ид на странице должен быть уникальным, судя по тому что вы выводите в цикле у вас несколько одинаковых ид- чего быть не должно
http://htmlbook.ru/html/attr/id
читайте Описание

@Lazy_Den · 12.01.2019, 12:42

Uni_programist, вы на каждой итерации просто перезаписываете содержимое элемента #content новыми данными.

JavaScript
1
2
3
4
5
6
var divblockcount = ' ';
// var mass = newsdecode; // Это лишнее
$.each(newsdecode, function(key, value) {
  divblockcount += '<div class="teloin">' + value.textnews + '</div>';
});
$("#content").html(divblockcount);

Сразу обращаю внимание на то, что я поменял id="teloin" на class="teloin". Нужно объяснять почему?

@Uni_programist · 12.01.2019, 13:21 **[ТС]**

Lazy_Den, спасибо все работает, все остальное можно делать по аналогии... Но то ли мне так кажется, что в jQuery это процесс усложнен, либо так оно и есть. Еще больше меня путала команда JSON.parse , так и не понял еще предназначения + она не работала...

Сообщение от Lazy_Den

Нужно объяснять почему?

Нет, разницу между id и class знаю, но вопросик все таки задам. Если допусти мне нужно будет вывести, например дату публикации, внутри <div class="teloin"></div> и стилизировать её, то что использовать, то же class или все таки id ведь calss объявлен?

@Mr_Sergo · 12.01.2019, 14:32

Сообщение от Uni_programist

разницу между id и class знаю

Разницу вы вроде понимаете и снова задаете вопрос

Сообщение от Uni_programist

class или все таки id

.....
Если вы выводите дивы в цикле, соответственно, их выведется несколько, теперь скажите что нужно использовать, id или class, если в результате, при выбранном 1-ом вашем варианте, на странице окажется несколько дивов с одинаковыми id?

Добавлено через 9 минут

Сообщение от Uni_programist

путала команда JSON.parse , так и не понял еще предназначения

В вашем случае она предназначена для приема ответа от сервера в JSON-формате. Если вы прописали на сервере что бы он отвечал в JSON-формате:

PHP
1
echo json_encode($_POST);  //или $_GET

то на стороне клиента нужно принимать ответ используя JSON.parse.
Если вы прописали на сервере что бы он отвечал НЕ в JSON-формате, соответственно на стороне клиента НЕ нужно принимать ответ используя JSON.parse

@Lazy_Den · 12.01.2019, 15:28

Сообщение от Uni_programist

но вопросик все таки задам

По сути, вам уже всё рассказал Mr_Sergo. Я только немного добавлю "лирики".
Вся ваша проблема, да и не только ваша, но и гигантского количества новичков в том, что язык программирования начинаете осваивать, не вызубрив его основы, а главное - синтаксис. Это касается не JS в частности, а любого ЯП в целом. Вот возьмём вашу первую фразу: "Стал углубляться в jQuery". Но ведь jQuery, если говорить простым языком, это не что иное, как набор функций/методов, написанных на обычном (нативном) JavaScript. Я так понял, что вы знакомы с PHP. Тогда можно провести поверхностную аналогию: библиотека jQuery - это нечто подобное в PHP, называемое "расширением", т.е. некий набор классов с их методами. Если вы работаете, например, с расширением PDO, то вам же всё равно нужно знать синтаксис PHP в целом и конкретно ООП? Очевидный ответ - да. Тогда, почему вы начинаете осваивать jQuery, когда не изучили нативный JS? Поверьте, после этого шага, у вас количество вопросов уменьшится в разы, а может даже и вовсе не останется.
Кстати, всё вышесказанное относится и к HTML/CSS, с которыми у вас также наблюдаются сложности.

@Uni_programist · 12.01.2019, 17:48 **[ТС]**

Lazy_Den, дело в том что на div id меня подтолкнула конструкция в PHP. Вот кусок кода

PHP
1
2
3
4
 <?php
                foreach ($obrabotka as $user){
                echo '<div id="elemets"><a href="userspage?link='.$user['link'].'" ><div style="position: relative; display:block; left: 0px !important;"><img src='.$user['img'].' width="100" height="100"></div>'.'<b><div id="elements2"> <font size="5" color='.colorschange().'>'.$user['name']." ".$user['familiya'].'</font></a></b><br>' ;
?>

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

Сообщение от Lazy_Den

, почему вы начинаете осваивать jQuery, когда не изучили нативный JS?

Интересный вопрос... Сперва, вообще хотел забыть про JS и все что с ним связано, потом попробовал изучать нативный JS, как то сложновато... А на jQuery есть команды более менее, но что понятно... Вот пробовал здесь https://learn.javascript.ru/ почитав введение - забросил... А jQuery чем то похож на PHP и именно благодаря этой замечательной библиотеке можно делать асинхронные запросы, а по сути мне большего не надо (скажем надо, но не все же)... Вот и задаюсь вопросом стоит ли учить JS, когда есть jQuery?

@Lazy_Den · 12.01.2019, 18:22

Сообщение от Uni_programist

Который исправно работает и выдает результат.

Вы сейчас смешиваете абсолютно разные вещи. И PHP, и JS выведут вам всё, что можно выводить на экран. Но если после вывода с элементами должен работать JS, то могут начаться проблемы. Предположим, что у вас N элементов с одинаковыми ID. С помощью JS вы хотите им всем добавить какой-то background. Что по вашему получиться? Ответ по этой ссылке. Почему именно так? Потому, что ID - уникальный, т.е. единственный в своём роде и JS об этом хорошо знает. Вы же не удивляетесь и не возмущаетесь по поводу того, что в массив нельзя добавить еще один элемент с ключом, который уже существует... И это опять же потому, что ключи в массиве - уникальны.

Сообщение от Uni_programist

Вот и задаюсь вопросом стоит ли учить JS, когда есть jQuery?

Решать вам. В конце концов, если изучать не будете, то всегда можно нанять для выполнения специалиста или же будете постоянным гостем на форумах подобно этому с мешком вопросов

А ведь JS только начинает набирать обороты и уже сегодня нужно очень постараться, чтобы найти сайты, которые JS не используют

@rockdgon · 08.02.2019, 12:52

Lazy_Den, Я вот по работе хорошо знаю HTML+CSS. Раньше пользовался JQuery + плагинами к нему различными. Теперь же из-за различных задач нужно глубже разбираться. Да и JavaScript очень популярным стал. Изучаю по немногу и хочу сказать - это сложненько)
Ну хоть разбирать код стал. Да и JQuery теперь более осознанно юзать стал.
А главное - сам! Я тут мимо проходил - флудить не хотел.

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	12.01.2019, 12:41
	Uni_programist, ид на странице должен быть уникальным, судя по тому что вы выводите в цикле у вас несколько одинаковых ид- чего быть не должно http://htmlbook.ru/html/attr/id читайте Описание 0

@rockdgon 0 / 0 / 0 Регистрация: 18.01.2019 Сообщений: 1
	08.02.2019, 12:52
	Lazy_Den, Я вот по работе хорошо знаю HTML+CSS. Раньше пользовался JQuery + плагинами к нему различными. Теперь же из-за различных задач нужно глубже разбираться. Да и JavaScript очень популярным стал. Изучаю по немногу и хочу сказать - это сложненько) Ну хоть разбирать код стал. Да и JQuery теперь более осознанно юзать стал. А главное - сам! Я тут мимо проходил - флудить не хотел. 0

$.each работа с div элементами

Решение