css 列表项未将数据拆分为两个单独的列jquery

o0lyfsai 于 2022-12-24 发布在 jQuery

关注(0)|答案(2)|浏览(110)

- 问题**

我尝试将一些返回的数据拆分为两个单独的列，因为默认情况下它只显示为一列数据。
该脚本如下所示：

console.log(prop.toUpperCase() + ': ', obj[prop]);

const markup = `<li class="list-group-item">${(prop.toUpperCase() + ': ', obj[prop])}</li>`;
                        
document.getElementById("result-list").insertAdjacentHTML('beforeend', markup);

ul {
color: white;
    text-align: left;
}

<ul id="result-list" class="list-group"></ul>

它在控制台中提供以下内容：

DESCRIPTION:  The Harvester
TYPE:  Restaurant
DESCRIPTION:  McDonalds
TYPE:  Fast food
etc etc...

然而，在前端我得到：

The Harvester
Restaurant
McDonalds
Fast food
etc etc...

我希望保留控制台显示的第一列（有效地），该列将具有DESCRIPTION标题（并包含下面的所有描述），第二列标题设置为TYPE，该列将包含下面的所有类型，例如

"我所尝试的"
我已经在我的css中尝试了下面的方法，以及一些其他的变体，但是它们似乎不起作用...

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    color: white;
    text-align: left;
}

css

来源：https://stackoverflow.com/questions/74894358/list-item-is-not-splitting-data-into-two-separate-columns-jquery

2条答案

按热度按时间

hc2pp10m1#

我认为您在const markup =${(prop.toUpperCase() + ': ', obj[prop])};部分有问题，请将其更改为markup +=${(prop.toUpperCase() + ': '+obj[prop])}``
根据我的理解，我的完整代码如下：

let data = [
  {"dscripiton": "The Harvester", "type":"Restaurant"}, 
  {"dscripiton": "McDonalds", "type":"Fast food"},
  {"dscripiton": "ok", "type":"ok?"}
]
var markup = "";
data.forEach((obj) => {
    Object.keys(obj).forEach((prop) => {
        console.log(prop.toUpperCase() + ': ', obj[prop]);
    markup += `<li class="list-group-item">${(prop.toUpperCase() + ': '+obj[prop])}</li>`;
  });
});

                        
document.getElementById("result-list").insertAdjacentHTML('afterend', markup);

赞(0）回复(0）举报 2022-12-24

iqjalb3h2#

我想这就是你所尝试的

let data = [
  {"dscripiton": "The Harvester", "type":"Restaurant"}, 
  {"dscripiton": "McDonalds", "type":"Fast food"},
  {"dscripiton": "etc etc", "type":"etc etc"}
]

data.forEach((obj) => {
  let el = document.createElement('li');
  el.className = "list-group-item";
  
  let arr = [];
  for(prop in obj) {
    el.innerHTML += `<span style="margin-left: 30px">${obj[prop]}</span>`;
  }
  console.log(el)
    document.getElementById("result-list").insertAdjacentHTML('beforeend', el.outerHTML);
  
});

赞(0）回复(0）举报 2022-12-24

我来回答

css 列表项未将数据拆分为两个单独的列jquery

2条答案

相关问题

热门标签

最新问答