JQUERY遍历取文字怎么取？

问题描述

问 题

HTML结构如下：

<div class="nav-list"></div><!--nav-list是预留，用来存放插入的元素-->
<div class="box">
    <div class="box-content">
        <div class="box-item">
            <h1>主标题1</h1><!--主标题1下包含三个副标题-->
            <i>副标题1</i>
            <div class="content">我是内容1</div>
            <i>副标题2</i>
            <div class="content">我是内容2</div>
            <i>副标题3</i>
            <div class="content">我是内容3</div>
        </div><!--这是第一个元素，为当前显示元素，其余元素隐藏-->
        <div class="box-item">
            <h1>主标题2</h1>
            <i>副标题1</i>
            <div class="content">我是内容1</div>
        </div>
        <!--主标题2-->
        <div class="box-item">
            <h1>主标题3</h1>
            <i>副标题1</i>
            <div class="content">我是内容1</div>
        </div>
        <!--主标题3-->
    </div>
</div><!--box 容器，只显示其中一个元素-->

以上是HTML结构，想要实现的效果如下

<div class="nav-list">
    <h3>主标题1</h3>
    <div class="item-list">
        <ul>
            <li>副标题1</li>
            <li>副标题2</li>
            <li>副标题3</li>
        </ul>
    </div>
    <!--获取上面代码 box-content 里的代码的-->
    <!--主标题和副标题并使用以上结构插入nav-list里。-->
    
    <h3>主标题2</h3>
    <div class="item-list">
        <ul>
            <li>副标题1</li>
        </ul>
    </div>
    <h3>主标题3</h3>
    <div class="item-list">
        <ul>
            <li>副标题1</li>
        </ul>
    </div>
</div>

这个nav-list原本为空，主要用于获取box-content里的信息。并以新格式插入nav-list里。我用each遍历，可以获取，但，副标题输出却为一行。而不是一个一个的。比如获取后变成<li>副标题1副标题2副标题3</li>，还有一种情况是，每个主标题下全部输出出来，如：

<ul>
    <li>副标题1</li>
    <li>副标题2</li>
    <li>副标题3</li>
    <li>副标题1</li>
    <li>副标题1</li>
    <li>副标题1</li>
</ul>
<!--每个主标题下全是以上内容-->

不知道该如何进行了，所以特来请教各位，还望给予帮助解决，先谢谢啦。

解决方案

  //存放主标题和副标题信息
  //格式为 {主标题:['副标题1','副标题2']}
  var titleObj = {}; 
  $('.box-item').each(function (index,item) {
    var $item = $(item);
    var mainTitle = $item.children('h1').text();
    titleObj[mainTitle] = [];
    $item.children('i').each(function (index,item) {
      titleObj[mainTitle].push($(item).text())
    })
  })
  console.log(titleObj);
  
  
  //根据titleObj 生成html
  var titleHtml = '';
  for (var key in titleObj) {
    titleHtml += '<h3>'+key+'</h3>';
    
    var subTitle = titleObj[key];
    
    titleHtml += '<div class="item-list"><ul>';
    
    for (var i = 0, len = subTitle.length; i < len; i++) {
      titleHtml += '<li>'+subTitle[i]+'</li>';
    }
    
    titleHtml += '</ul></div>';
    
  }

  
  $('.nav-list').html(titleHtml);

这篇关于JQUERY遍历取文字怎么取？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！