Question

此列表是使用输入标记并将元素附加到ul生成的：

<ul id ="add">
    <li>3</li>
    <li>4</li>
    <li>*</li>
    <li>5<li>
    <li>+<li>
    <li>3</li>
<ul>

这是我现在要遍历的列表，以便在控制台上获得 34 * 5 + 3 ，可以使用JavaScript进行计算，但是如何获取所有Li的值进行标记以便能够计算：

完整的代码是我想从中进行计算的：

<!DOCTYPE html>
<html>
    <head>
        <title>solve</title>
       <script>
        document.addEventListener('DOMContentLoaded',()=>{
            document.querySelector('#submit').onclick =()=>{
                const li = document.createElement('li');
                li.innerHTML = document.querySelector('#number').value;
                document.querySelector('#add').append(li);
                return false;
            };
        });
       </script>

       <style>
           li{
               list-style-type: none;
               display: inline;

           }
       </style>
    </head>
    <body>

        <div id="user-input">
            <ul id="add">

            </ul>
        </div>
        <div>
           <form>
                <input type="text" id="number">
                <input type="submit" id="submit">
           </form>

        </div>
    </body>
</html>

Answer 1

您可以使用document.querySelector和textContent获取将是字符串的文本，然后使用eval进行计算。

let m = [...document.querySelector("#add").children];
let val = '';
m.forEach(function(item) {
  val += item.textContent;

})

console.log(eval(val)) //34*5+3

<ul id="add">
  <li>3</li>
  <li>4</li>
  <li>*</li>
  <li>5</li>
  <li>+</li>
  <li>3</li>
</ul>

Answer 2

您可以使用forEach()遍历li的位置：

var satatement = '';

document.querySelectorAll('#add li').forEach(function(item) {
  satatement += item.textContent.trim();
});

console.log(satatement, '=', eval(satatement));

li {
   list-style-type: none;
   display: inline;
}

<div id="user-input">
  <ul id="add">
    <li>3</li>
    <li>4</li>
    <li>*</li>
    <li>5</li>
    <li>+</li>
    <li>3</li>
  </ul>
</div>

Answer 3

let text = document.querySelectorAll('#add li').reduce((text, el) => text + el.innerHTML);

使用document.querySelectorAll('#add li')获取列表项。

innerHTML

reduce生成单个字符串。

当然，您也可以使用列表的textContent，其中包括

节点及其后代的文本内容

document.querySelector('#add').textContent，但这将在每个li之间包含换行符。

如何使用JavaScript获取所有li元素以进行计算

3 个答案: