Question

我是第一次尝试使用javascript，并且想知道如何从内部元素中获取元素，以便我可以将它们显示给用户。我想知道是否有任何javascript代码可以去获取以下项目：

<ul id="tests">
<li class="test w0">
    <div class="letter l0">a</div>
    <div class="letter l1">b</div>
    <div class="letter l2">c</div>
</li>
<li class="test w1">
    <div class="letter l0">a2</div>
    <div class="letter l1">b2</div>
    <div class="letter l2">c2</div>
</li>
<li class="test w3">
    <div class="letter l0">a3</div>
    <div class="letter l1">b3</div>
    <div class="letter l2">c3</div>
</li>
</ul>

我想获得＆＃34; test＆＃34;内的每个列表项内的字母。元件。我怎么会单独使用javascript？

我想要的只是将字符串放入一个数组中以显示给用户。我知道如何向用户显示信息，而不是如何获取元素内的字符串。

输出代码：

 [a,b,c,a2,b2,c2,a3,b3,c3] //Store strings in array

我不了解JQuery，所以我想要一个javascript方法....

Answer 1

您可以使用querySelectorAll：

var ary = [];
var lis = document.querySelectorAll('li.test div.letter');
for (var i = 0; i < lis.length; i++) {
    ary[i] = lis[i].innerHTML;
}
console.log(ary); // outputs ["a", "b", "c", "a2", "b2", "c2", "a3", "b3", "c3"]

<强> jsFiddle example

Answer 2

你可以试试这个：

使用jQuery：

var values = [];
$('#tests').find('.letter').each(function(i, element) {
    values.push($(this).text());
});

仅使用JavaScript：

var values = [], inputs = document.getElementsByClassName('letter');
inputs.forEach(function(element) { 
    values.push(element.innerHTML);
});

Answer 3

如果您使用的是jQuery，则可以使用map功能。它是在无序列表的上下文中。这是代码：

var $ul = $('#tests'),
stringArray;

stringArray = $.map($ul.find('div'), function(el, index){
    return el.innerHTML;
});

console.log(stringArray);
$ul.after(stringArray);

JsFiddle：http://jsfiddle.net/8xkK8/

Answer 4

纯Javascript解决方案，它可以遍历DOM并只获取文本节点：

  // Get just the text out of an element.  Strips formatting.
  getText = function (el) {
    var ret;
    var txt = [],
      i = 0;

    if (!el) {
      ret = "";
    } else if (el.nodeType === 3) {
      // No problem if it's a text node
      ret = el.nodeValue;
    } else {
      // If there is more to it, then let's gather it all.
      while (el.childNodes[i]) {
        txt[txt.length] = getText(el.childNodes[i]);
        i++;
      }
      // return the array as a string
      ret = txt.join("");
    }
    return ret;
  };

获取列表项Javascript中的列表项的值

4 个答案: