私は自分のコードが正しいことを誓いますが、それは機能していないようです。これが私のフィドルです：https：//jsfiddle.net/py5cvpmz/1/
そしてここにjQueryコードがあります：
var searchArea = $('main');
var blockArea = $('.sidebar .container');
var blockDynamic = $('.block-dynamic ul');
var items = [];
var title;
blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');
searchArea.find('h2').each(function(e) {
title = $(this).text();
items.push(title);
});
$.each(items, function(i, val) {
// When I use a console.log here to output 'val', it works fine
blockDynamic.append('<li class="item-' + i + '">' + val + '</li>');
});
blockDynamic参照している要素がに追加される前にキャッシュしていblockAreaます。コードが機能することを確認するにはblockDynamic、append呼び出しの後にの宣言を移動します。
var searchArea = $('main');
var blockArea = $('.sidebar .container');
blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');
var blockDynamic = $('.block-dynamic ul');
searchArea.find('h2').each(function(i, e) {
var title = $(this).text();
blockDynamic.append('<li class="item-' + i + '">' + title + '</li>');
});main {
width: 300px;
float: left;
height: auto;
padding: 20px;
background-color: #ccc;
}
main h2 {
width: 100%;
text-align: center;
}
.sidebar {
float: left;
width: 200px;
margin-left: 20px;
background-color: #333;
}
.sidebar .container {
width: 100%;
height: auto;
color: #fff;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<main>
<h2>
this is a test h2
</h2>
<h2>
this is another test h2
</h2>
<h2>
this is, once again, a test h2
</h2>
<h2>
this is the last test h2
</h2>
</main>
<div class="sidebar">
<div class="container">
<!-- Here I want all the H2 titles as menu items -->
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加