jquery - 在列表中显示段落内容

Question

我希望内容以列表形式单行显示。我想在纯 css 的帮助下在新行中显示逗号 (,) 之后的内容。

.datatype {
  color: #3e3a3a;
  font-size: 15px;
}

<div class="datatype">
  <p>Hello Noah, Hello Noah, Hello Liam, Hello Mason, Hello Jacob, Hello William, Hello Ethan, Hello James, Hello Elijah</p>
</div>

内容是这样显示的/image/tNrSy.png

期望的结果:/image/yR14p.png

Link to jsFiddle

Answer 1

您可以:

1. 使用<p>每个名字的标签
2. 添加</br>在每个名字之后
   • 可以用HTML或JS
   来完成

选项1

.datatype{
    color: #3e3a3a;
    font-size: 15px;
}

<div class="datatype">
  <p>Hello Noah,</p>
  <p>Hello Noah,</p> 
  <p>Hello Liam,</p>
  <p>Hello Mason,</p> 
  <p>Hello Jacob,</p> 
  <p>Hello William,</p> 
  <p>Hello Ethan,</p> 
  <p>Hello James,</p> 
  <p>Hello Elijah</p>
 </div>

选项 2(HTML)

.datatype{
    color: #3e3a3a;
    font-size: 15px;
}

<div class="datatype">
  <p id="names">Hello Noah,</br> Hello Noah,</br> Hello Liam,</br> Hello Mason,</br> Hello Jacob,</br> Hello William,</br> Hello Ethan,</br> Hello James,</br> Hello Elijah</p>
 </div>

选项 2 (JS)

//let list = document.getElementById('names');
let list = document.getElementsByClassName('datatype')[0].querySelector('p');

//console.log(list);
console.log(list.innerHTML);

let arr = list.innerHTML.split(',').map((name) => name.trim() + ',</br>');
console.log(arr);
console.log(arr.join(''));
list.innerHTML = arr.join('');

.datatype{
    color: #3e3a3a;
    font-size: 15px;
}

<div class="datatype">
  <p id="names">Hello Noah, Hello Noah, Hello Liam, Hello Mason, Hello Jacob, Hello William, Hello Ethan, Hello James, Hello Elijah</p>
 </div>

---

编辑

查看 jsfiddle你已经包含了，你可以改变document.getElementsByClassName('data')[0].querySelector('p') 至 document.getElementsByClassName('data')[1].querySelector('p') .

这将获取第二个元素而不是第一个。 您还可以给要更改的表行另一个类 名称，并替换'data'用你的新类(class)的名字。

我还看到您在使用 jQuery。相当于

document.getElementsByClassName('data')[1].querySelector('p')是$('.data p')[1]

LINK TO JSFIDDLE