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

时间:2016-05-20 11:29:14

标签: jquery html arrays

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

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/

的链接

3 个答案:

答案 0 :(得分:0)

你可以试试这个:

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"]

答案 1 :(得分:0)

您尝试将.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>

答案 2 :(得分:0)

这是JsFiddle

如果你想要整个html上下文,那就按它打印

console.log(ar);

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

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