我有一个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>
答案 0 :(得分:1)
您需要使用.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>