Как я могу добавить класс для div внутри функции javascript

ребята, мне нужно добавить класс для div внутри функции javascript. Я хочу поставить коробку через каждые gency_name, ADRESS_TEXT и phone Как мне это сделать

  function jsFilt(value) {
                   document.getElementById("myDiv").innerHTML = "";
                    value.AGENCY.forEach(agency => {
                        $("#myDiv").append(
                       //HERE     "<div class  = "xxx" style='border-style:ridge' ><strong>Agency Name :</strong>  " + agency.agency_name + "<br>" +
                            "<strong>Adress : </strong> " + agency.ADRESS_TEXT + "<br> "+
                            "<strong>Phone :</strong>  " + agency.phone + "<br></div>"
                        );
                    });
                }

CSS

.xxx{
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0px;
}

вы уже используете JQuery, вы можете использовать addClass() w3schools.com/jquery/jquery_css_classes.asp

Hachimi Ahmed Amine 28.05.2019 15:58

что вы имеете в виду перед добавлением? $("#myDiv").addClass("xx").Добавить

Joe 28.05.2019 16:09

Вы устали $("#myDiv").append(....).addClass("xx")

Hachimi Ahmed Amine 28.05.2019 16:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
199
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете добавить класс в div после добавления, например:

    function jsFilt(value) {
                   document.getElementById("myDiv").innerHTML = "";
                    value.AGENCY.forEach(agency => {
                        $("#myDiv").append(
                            "<strong>Adress : </strong> " + agency.ADRESS_TEXT + "<br> "+
                            "<strong>Phone :</strong>  " + agency.phone + "<br></div>"
                        ).addClass("CLASSNAME1 CLASSNAME2");
                    });
                }

Привет. Я думаю, что ваше решение не то, что он хочет. поскольку вы добавляете класс в myDiv не внутренний div, который он хочет. также вы добавляете один и тот же класс снова и снова (внутренний цикл) в контейнер. вы можете проверить мой ответ.

Mishel Parkour 28.05.2019 16:30

Это правда, и да, мой код добавит его в myDiv, и мне нравится ваш ответ. Спасибо, здесь прекрасное сообщество, и мне здесь так много помогают, что я хотел посмотреть, смогу ли я присоединиться.

Nukinglowping 28.05.2019 16:37

Прохладный. Мне нравится ваше отношение. Нам здесь нужны такие люди, как ты. Я такой же, как ты, все такие же, как ты. у нас есть вопросы и проблемы, которые мы не можем решить, мы спрашиваем. Мы видим, что есть проблема, которую мы можем помочь решить, мы прыгаем. Хорошего дня.

Mishel Parkour 28.05.2019 16:40
Ответ принят как подходящий

Как говорили другие, есть два пути: .addClass('classname1 classname2') и .attr('class','classname1 classname2'), но addClass лучше

в вашем случае будет так:

function jsFilt(value) {
  console.info('running jsFilt');
  //document.getElementById("myDiv").innerHTML = "";
  $('#myDiv').html(''); // this is jquery way of doing it
  console.info('myDiv is now empty');

  value.AGENCY.forEach(agency => {
    console.info('inside loop');
        //first we create that div and give it class and style
        const $div = $('<div></div>').addClass('xxx').attr('style','border-style:ridge;');
        // here we set innerHTML
        $div.html(`
            <strong>Agency Name :</strong>  ` + agency.agency_name + `<br>
            <strong>Adress : </strong> ` + agency.ADRESS_TEXT + `<br>  
            <strong>Phone :</strong> ` + agency.phone + `<br>
        `);

        console.info('here is the div we created:',$div);

        // here we append it to the container (#myDiv)
        $("#myDiv").append($div);
        console.info('this is how myDiv looks like now', $("#myDiv"));
    });
}

убедитесь, что вы вызываете функцию, конечно jsFilt(someValue)

Я добавляю немного console.info('bla bla') в свои коды, если вы откроете консоль браузера, вы увидите распечатку некоторых сообщений, и это поможет вам отследить проблему. после того как все заработало можно убрать console.info()s

Так что это может работать или может иметь некоторые синтаксические ошибки. Дайте мне знать, если вы можете заставить его работать

я не получаю никаких ошибок, но я думаю, что мой класс (xxx) не работает, ничего не меняйте, сэр

Joe 28.05.2019 19:11

пожалуйста, дайте мне несколько примеров. например, HTML-файлы, которые вы хотите создать с помощью javascript. и вы уверены, что вызываете функцию? jsFilt(value)? и вы можете поставить флаги, чтобы увидеть, выполняется ли каждая часть кода. Я обновлю свой ответ

Mishel Parkour 28.05.2019 19:28

да jsFilt(value) , agency.agency_name , agency.ADRESS_TEXT и agency.phone я понимаю их все

Joe 28.05.2019 19:54

так в чем теперь твоя проблема?

Mishel Parkour 28.05.2019 20:03

как я уже сказал, мой класс (xxx) не работает, ничего не меняйте, похоже, я не могу добавить класс

Joe 28.05.2019 20:28

Извините, я не могу вам помочь. У меня должны быть полные коды, чтобы я мог отслеживать проблему.

Mishel Parkour 28.05.2019 22:53

Другие вопросы по теме