Question

function listBarcodes() {
    var li = document.createElement("li");
    var text = document.createTextNode(txt1.value); //txt1 is text input
    li.id = "liElements"
    var lis = document.getElementById('liElements')

    if (txt1.value.substring(0, 3) != lis.innerText.substring(0, 3)) {
        li.appendChild(text);
        document.body.appendChild(li);

    } else {
      //do stuff    
    }
}

如上所示。我想制作一个函数，如果条形码的前三个数字在ul的{中都没有，则创建一个新的组（例如div或li） {1}}在文本输入中输入条形码时。因此，如何扫描带有innnerText标签的所有元素或文档中所有li的{{1}}的元素，并检查前三个数字是否存在。

注意：就像条形码以“ 123”开头，如果不存在，它将创建一个“ 123” div或ul。下次我键入以'123'开头的条形码，而不是创建新的div或ul时，它将在'123'组中列出。

Answer 1

您是否正在寻找类似的东西？

(function () {
    var pressed = function () {
    var value = this.value.trim();
    if (value.length < 3) return true;
    var container = document.getElementById('barcode-items');
    var group = container.querySelectorAll('.group');
    var createNew = function () {
      var g = document.createElement('DIV');
      g.className = 'group';
      g.innerHTML = value;
      container.appendChild(g);
    };
    var val3 = value.substring(0, 3);
    if (group.length) {
      var found = -1;
      group.forEach(function (v, i) {
        if (v.innerHTML.indexOf(val3) !== -1) found = i;
      });
      if (found == -1) createNew();
      else alert('found the group at index : ' + found);
    }
    else createNew();
  };
  document.getElementById('typer').addEventListener('keyup', pressed, true);
})();

<input type="text" placeholder="type code here." id="typer" />
<div id="barcode-items">
</div>

检查html页面中所有'li'元素的innerText

1 个答案: