Как отобразить динамически сгенерированный в строке в одной строке?

ProgramBox

Как отобразить динамически сгенерированный в строке в одной строке?

Post author:admin
Запись опубликована:28 октября, 2022
Post category:Вопросы по программированию

#javascript #css #bootstrap-4

#javascript #css — код #начальная загрузка-4

Вопрос:

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

 function display(){
var lght = jsn[0].ingredient.length; 
var old_val = new Array(lght);
var ell =  "";
var ul = document.getElementById("comp_tag");
for(let a=0; a < lght; a  ){
    var li = document.createElement('li');
    var divr = document.createElement('div');
    li.setAttribute("id","lineid_" a);
    divr.setAttribute("class","row align-middle");
    ul.appendChild(li);
    li.appendChild(divr);
    var col_one = document.createElement('div');
    col_one.setAttribute("class","col-6 text-left");
    col_one.setAttribute("id","col1" a);
    divr.appendChild(col_one);
    col_one.appendChild(document.createTextNode("value 1"));
    var col_two = document.createElement('div');
    col_two.setAttribute("class","col-3 text-right");
    col_two.setAttribute("id","col2" a);
    divr.appendChild(col_two);
    col_two.appendChild(document.createTextNode("value 2"));
    var col_three = document.createElement('div');
    col_three.setAttribute("class","col-3 text-left");
    col_three.setAttribute("id","col3" a);
    divr.appendChild(col_three);
    var pb = init_workspace(jsn[0].ingredient[a].type);
    var sel = document.createElement("select");
    sel.setAttribute("class","custom-select");
    sel.setAttribute("id","c_select" a);
    col_three.appendChild(sel);
    for(var t=0; t<pb.length; t  ){
        var optn = document.createElement("option");
        if(jsn[0].ingredient[a].unit == pb[t].name){
            optn.setAttribute("selected","")
        };
        optn.setAttribute("value",pb[t].name);
        sel.appendChild(optn);
        optn.appendChild(document.createTextNode(pb[t].name));
    }

И моя HTML-часть такова:

 <div class="col-md text-right" id="divid">
        <p class="text-uppercase"><b>ingredients</b></p>
        <ul id="comp_tag">
        </ul>
</div>

1. Если вы хотите, чтобы созданные <li> теги были встроенными, пробовали ли вы сделать свой UL-тег гибким контейнером display: flex; ?

2. Можете ли вы привести пример jsn объекта? И обновите javascript, чтобы он был действительным, в нем чего-то не хватает } .

3. Без объекта jsn и его структуры воссоздать ваш дисплей сложно. Также, похоже, вы пропустили две закрывающие круглые скобки в своей функции.

4. Да, это, конечно, моя вина. Я думал, что включение этого просто сделает код ужасно нечитаемым, мне нужно быть намного более внимательным к коду, который я публикую. Но совет был полезен, добавив display: flex; исправил мою проблему. Большое вам спасибо.

Ответ №1:

Без объекта jsn, чтобы воссоздать этот пример таким, каким вы его видите, я привожу статический пример ниже…

Сделайте родительский элемент элементов вашего списка гибким контейнером. Это приведет к размещению элементов уровня блока в ряд. Чтобы проиллюстрировать это, я поместил статические элементы списка в UL и нацелил его с помощью CSS display: flex; .

 #divid #comp_tag {
  display: flex;
}

Ниже приведен очень простой фрагмент, который воссоздает объект и помещает элементы objects в строку, используя display:flex родительский элемент UL.

Надеюсь, это поможет…

 let obj = {
  0: {
    'name': 'Cajun Delight',
    'ingredients': {
      'type': {
        'salt': '1 teaspoon',
        'garlic': '2 cloves',
        'pepper': '1 pinch'
      }
    }
  },
  1: {
    'name': 'Midwest Bland',
    'ingredients': {
      'type': {
        'salt': '1 teaspoon',
        'garlic': '2 cloves',
        'pepper': '1 pinch'
      }
    }
  },
  2: {
    'name': 'Asian Stir Fry',
    'ingredients': {
      'type': {
        'salt': '1 teaspoon',
        'garlic': '3 cloves',
        'pepper': '1 pinch',
        'soy_sauce': '1/4 cup'
      }
    }
  }
}


function displayInfo() {
  let compTag = document.getElementById("comp_tag");
  for (let values in obj) {
    let li = document.createElement("LI");
    li.textContent = obj[values].name;
    compTag.append(li);
    compTag.style.justifyContent = "space-around";

    if (obj[values].ingredients.type) {
      for (let type in obj[values].ingredients.type) {
        let subUl = document.createElement("UL");
        let subLi = document.createElement("LI");
        li.append(subUl);
        subUl.append(subLi);
        subLi.textContent = `${obj[values].ingredients.type[type]}`;        
      }

    }

  }
}

displayInfo();

 #divid #comp_tag {
  display: flex;
  list-style-type: none;
}

 <div class="col-md text-right" id="divid">
        <p class="text-uppercase"><b>ingredients</b></p>
        <ul id="comp_tag">
        </ul>
</div>

Развернуть фрагмент