Html Jquery从每个DIV'；单独的

我有一个HTML，如下所示

<div id="PanelLevel" class="panel-body">
   <div class="container">
      <div class="row">
         <div class="col-md-3">
            Very Important
            <div id="maindiv1" class="ui-widget-vi">
               <div class='column'>
                  <div class='portlet' >
                     <div class='portlet-header'>Energy_Efficiency</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet' >
                     <div class='portlet-header'>Maintenance_Ease</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet' >
                     <div class='portlet-header'>Cold_Weather_Operation</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-3">
            Important
            <div id="maindiv2" class="ui-widget-i">
               <div class='column'>
                  <div class='portlet'>
                     <div class='portlet-header'>First_Cost</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Operating_Cost</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Footprint</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Height</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Sound</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Corrosion_Resistance</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-3">
            Somewhat Important
            <div id="maindiv3" class="ui-widget-si">
               <div class='column'>
                  <div class='portlet'>
                     <div class='portlet-header'>Weight</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Installation_Ease</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Redundancy</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-3">
            Not Important
            <div id="maindiv4" class="ui-widget-ni">
               <div class='column'>
                  <div class='portlet'>
                     <div class='portlet-header'>Indor_Ducted_Installation</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
                  <div class='portlet'>
                     <div class='portlet-header'>Water_Usage</div>
                     <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

您可以使用

map（）

构建所需输出的数组：

let output=$（'.col-md-3>div'）.map（（i，c）=>({
[c.id]：$（c.find（'.portlet头'）.map（（i，p）=>$（p.text（））.get（）
})).get（）；
控制台日志（输出）

非常重要
能源效率
Lorem ipsum dolor sit amet，一位杰出的领导者
维修方便
Lorem ipsum dolor sit amet，一位杰出的领导者
寒冷天气操作
Lorem ipsum dolor sit amet，一位杰出的领导者
重要的
首付成本
Lorem ipsum dolor sit amet，一位杰出的领导者
经营成本
Lorem ipsum dolor sit amet，一位杰出的领导者
足迹
Lorem ipsum dolor sit amet，一位杰出的领导者
高度
Lorem ipsum dolor sit amet，一位杰出的领导者
声音
Lorem ipsum dolor sit amet，一位杰出的领导者
耐腐蚀性
Lorem ipsum dolor sit amet，一位杰出的领导者
有点重要
重量
Lorem ipsum dolor sit amet，一位杰出的领导者
安装方便
Lorem ipsum dolor sit amet，一位杰出的领导者
冗余
Lorem ipsum dolor sit amet，一位杰出的领导者
不重要
Indor_管道安装
Lorem ipsum dolor sit amet，一位杰出的领导者
用水
Lorem ipsum dolor sit amet，一位杰出的领导者
以下内容可能更容易转换为json格式


$（文档）.ready（函数（）{
var result={}；
$（'[id^=maindiv]'）。每个（函数（）{
var key=$（this.attr（'id'）；
结果[键]=$（this）.find（'.portlet头'）.map（函数（）{
返回$（this.text（）；
})
.get（）
。加入（‘，’）；
});
控制台日志（结果）；
});

非常重要
能源效率
Lorem ipsum dolor sit amet，一位杰出的领导者
维修方便
Lorem ipsum dolor sit amet，一位杰出的领导者
寒冷天气操作
Lorem ipsum dolor sit amet，一位杰出的领导者
重要的
首付成本
Lorem ipsum dolor sit amet，一位杰出的领导者
经营成本
Lorem ipsum dolor sit amet，一位杰出的领导者
足迹
Lorem ipsum dolor sit amet，一位杰出的领导者
高度
Lorem ipsum dolor sit amet，一位杰出的领导者
声音
Lorem ipsum dolor sit amet，一位杰出的领导者
耐腐蚀性
Lorem ipsum dolor sit amet，一位杰出的领导者
有点重要
重量
Lorem ipsum dolor sit amet，一位杰出的领导者
安装方便
Lorem ipsum dolor sit amet，一位杰出的领导者
冗余
Lorem ipsum dolor sit amet，一位杰出的领导者
不重要
Indor_管道安装
Lorem ipsum dolor sit amet，一位杰出的领导者
用水
Lorem ipsum dolor sit amet，一位杰出的领导者
感谢您的回复，我对jquery没有太多了解……在输出中，我不想要内容，我只需要来自所有4个maindiv的内容s@rajesh上面的示例不包含来自
.portlet内容
..@freedomn-m的HTML，再次感谢您的编辑！非常感谢Rory…我没有正确地看到…你能在JSFIDLE中分享这个吗，这样我就可以理解了…当我使用alert（输出）而不是console.log（输出）时，我没有得到输出；感谢Miller，感谢您的大力支持，是否可以在aspx页面而不是Console.Log中显示输出。。。。
$(document).ready(function() {
 $('div').each(function () {
            var i = $(this).attr('id');
            alert(i);
           
      });

 var text = $( '.portlet-header' ).map(function() { 
  return $( this ).text(); 
})
.get()
.join( ',' );
});