如何从 <li> 获取内容并将其放置在 jQuery 数组中答案

【问题标题】：How to get content from a <li> and place it in a jQuery array如何从 <li> 获取内容并将其放置在 jQuery 数组中
【发布时间】：2016-05-20 11:29:13
【问题描述】：

我正在尝试获取列表的内容并将其放入数组中。结果，我得到了一个数字列表，而不是其自身的内容。有什么想法可以将内容放在数组中吗？

var ar = [];


$('.div-holder .tab-inner').each(function(){

  var createList = (ar.push($(this.innerHTML).text()));
  console.log(createList);

});

<div class="div-holder">


<ul><li class="tab-alpha"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Beverley</span></span></a></li><li class="tab-beta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Driffield</span></span></a></li><li class="tab-gamma"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Francis Scaife</span></span></a></li><li class="tab-delta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Goole</span></span></a></li><li class="tab-epsilon tab-selected"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Haltemprice</span></span></a></li><li class="tab-zeta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Hornsea</span></span></a></li><li class="tab-eta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">South Cave</span></span></a></li><li class="tab-theta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">South Holderness</span></span></a></li>
<li class="tab-iota">
<a href="/promotions/half-term-activities/#">
<span class="tab-outer">
<span class="tab-inner">Withernsea</span>
</span>
</a>

这里是问题的链接https://jsfiddle.net/ryadkhhp/4/

【问题讨论】：

想在哪里获取 ar 数组或 createList 中的值？如果 arr 那么你的就可以了。只需 console.log(ar) 或者如果您想在 createList 中打印它，然后将其分配为 createList = $(this).html();

标签： jquery html arrays

【解决方案1】：

你可以试试这个：

Jsfiddle：https://jsfiddle.net/x6rhghfh/

var ar = [];
$('.div-holder .tab-inner').each(function(){
        ar.push($(this).text());
});
console.log(ar)

输出：

 ["Beverley", "Driffield", "Francis Scaife", "Goole", "Haltemprice", "Hornsea", "South Cave", "South Holderness", "Withernsea"]

【讨论】：

【解决方案2】：

您正在尝试将.push() 方法结果分配给createList，而.push 返回数组长度，这就是您获取数字而不是文本的方式。

其次，您以错误的方式使用 $ - 它应该接受选择器或 DOM 元素，并且您正在传递文本节点。你应该使用ar.push(this.innerHTML) 或ar.push($(this).text())

$(document).ready(function() {
  var ar = [];
  var ar2 = [];

  $('.div-holder .tab-inner').each(function() {
    ar.push($(this).text());
  });
  
  document.write(ar)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-holder">
  <ul>
    <li class="tab-alpha"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Beverley</span></span></a></li>
    <li class="tab-beta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Driffield</span></span></a></li>
    <li class="tab-gamma"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Francis Scaife</span></span></a></li>
    <li class="tab-delta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Goole</span></span></a></li>
    <li class="tab-epsilon tab-selected"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Haltemprice</span></span></a></li>
    <li class="tab-zeta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">Hornsea</span></span></a></li>
    <li class="tab-eta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">South Cave</span></span></a></li>
    <li class="tab-theta"><a href="/promotions/half-term-activities/#"><span class="tab-outer"><span class="tab-inner">South Holderness</span></span></a></li>
    <li class="tab-iota">
      <a href="/promotions/half-term-activities/#">
        <span class="tab-outer">
<span class="tab-inner">Withernsea</span>
        </span>
      </a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

这里是JsFiddle。

如果您想需要整个 html 上下文，那么只需通过它打印

console.log(ar);

或者如果你想在 createList 中获取它，那么就这样做

$('.div-holder .tab-inner').each(function(){
var createList = (ar.push($(this).text()));
createList = $(this).text();
console.log(createList);
});

【讨论】：