[英]Append data in a div element from .each loop
我有一個html菜單,我想獲取一些信息並對其進行處理以用於其他地方。
但是在每個循環中,我無法將數據推送到各自的元素。
JS
$(document).ready(function () {
// create a element container
navDiv = $("#menu");
$( "#mainnav .leval1" ).each(function() {
var parent = $(this).children('a').html();
var child = $(this).next('.navbox').html();
var menuBlock = "<li><span> " +parent + "</span> " + child + "</li>";
navDiv += menuBlock;
console.log(menuBlock);
});
HTML
<p id="print"></p>
<div id="menu"></div>
<div id="mainnav">
<div class="leval1"><a href="">lorem2</a></div>
<div class="navbox">
<ul>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
</ul>
</div>
<div class="leval1"><a href="">lorem2</a></div>
<div class="navbox">
<ul>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
</ul>
</div>
<div class="leval1"><a href="">lorem2</a></div>
<div class="navbox">
<ul>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
</ul>
</div>
<div class="leval1"><a href="">lorem2</a></div>
<div class="navbox">
<ul>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
</ul>
</div>
<div class="leval1"><a href="">lorem2</a></div>
<div class="navbox">
<ul>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
<li><a href="">lorem2</a></li>
</ul>
</div>
</div>
您需要使用.append()n連接字符串+
$(document).ready(function() { var navDiv = $("#menu"); $("#mainnav .leval1").each(function(i) { if (i % 4 == 0) { //fourth iterration do something } var parent = $(this).children('a').html(); var child = $(this).next('.navbox').html(); var menuBlock = "<li><span>p: " + parent + "</span> " + child + "</li>"; $('#print').html(menuBlock); //also the + operator won't work with jQuery object you need to append them navDiv.append(menuBlock); console.log(menuBlock); }); //navDiv.mmenu(); });
#print { border: 1px solid red; } #menu { border: 1px solid green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="print"></p> <!--Since you are appending `li` elemetns, menu should be a ul--> <ul id="menu"></ul> <div id="mainnav"> <div class="leval1"><a href="">lorem2</a> </div> <div class="navbox"> <ul> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> </ul> </div> <div class="leval1"><a href="">lorem2</a> </div> <div class="navbox"> <ul> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> </ul> </div> <div class="leval1"><a href="">lorem2</a> </div> <div class="navbox"> <ul> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> </ul> </div> <div class="leval1"><a href="">lorem2</a> </div> <div class="navbox"> <ul> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> </ul> </div> <div class="leval1"><a href="">lorem2</a> </div> <div class="navbox"> <ul> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> <li><a href="">lorem2</a> </li> </ul> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.