javascript - 隐藏符号后的内容

Question

我有一个列表，想要使用 javascript 隐藏所有列表项上破折号后的所有内容

<ul id="list">
 <li class="item">
  this is the main stuff - this is the rest
 </li>
 <li class="item">
  this is the main stuff - this is the rest
 </li>
 <li class="item">
  this is the main stuff - this is the rest
 </li>
</ul>

到目前为止，我遇到了这段代码，但我不确定如何实现它，以便它对某个列表 id 和 class 中的所有内容产生影响。

var s = 'test:string'; 
s.split(':')[0];

我该怎么做？

Answer 1

这样就可以了。希望能帮助到你。您可以使用查询选择器全部来选择具有(id)及其子项的特定列表。由于您没有html标签，因此您必须遵循一些类似的方法，否则只需将文本包裹在 span 中并隐藏即可。

function hide(id,cl) {
  let data = document.querySelectorAll(`#${id} >.${cl}`);

  data.forEach(ele => {

    ele.textContent = ele.textContent.split("-")[0]
  })


}
// More general solution just pass the id and class 
hide("list","item")

<ul id="list">
  <li class="item">
    this is the main stuff - this is the rest
  </li>
  <li class="item">
    this is the main stuff - this is the rest
  </li>
  <li class="item">
    this is the main stuff - this is the rest
  </li>
</ul>