所以我通常用Excel VBA编程，有时用C＃编程，对我来说javascript是不熟悉的，所以请原谅我这很容易。
我有一个html文档，我希望随着时间的推移填充有关经济学的说明。同样在文档中我有一些使用JQuery treeview的javascript，我从Youtube教程中获得了这个。我需要一切都在一个文档中，以便部署非常简单。
HTML文档有一个树形视图部分（实际上有两个，但没关系），一个主题查看器部分（最终我放在右边），所有主题列表“生产”最初将被隐藏
在树视图中，我希望每个树视图节点都有一个锚点引用，指向所有主题部分中的div元素。我是ID属性，所以我可以使用相对引用语法hash＃。单击树视图节点时，我希望Javascript代码使用节点中的哈希搜索文档并找到主题div。然后我想抓住主题内容（可能是innerhtml）并将它们粘贴到主题查看器的div内容（也可能是innerhtml）。
因此，我正在构建的是我的经济学笔记的一个简单的单页维基百科。
所以我认为我距离成功还有两条线。我卡住了，因为我不知道如何遍历DOM，我尝试了一些XPATH类型的语法，我在使用XML时使用它，但它在这里不起作用。
我遇到了困难所以请帮助我排队，谢谢。代码附后。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>One Page</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script>
// Source code initially borrowed from this helpful chap Jiansen Lu http://www.youtube.com/watch?v=BZFkWDGyZBs
$(function () {
$('div.mytree div:has(div)').addClass('parent');
$('div.mytree div').click(function () {
var thistree = $(this);
thistree.children('div').toggle();
thistree.filter('.parent').toggleClass('expanded');
// does the clicked link have an anchor
var anchor = thistree.children('a');
if (anchor.length > 0) {
// we got an anchor so grab id
var topic = anchor[0].hash; // children('#href');
// and grab contents
//---GOT STUCK HERE
var topicContents = $('div.AllTopics div[@id="' + topic + '"]');
// paste contents to topic viewer div
//NOT WORKING $('div.TopicViewer').innerhtml = topicContents.innerhtml;
}
return false;
});
});
</script>
<style>
div.mytree div {
padding-left: 15px;
background: transparent url(http://www3.telus.net/jianlu58/bullet.gif) no-repeat top left;
}
div.mytree div.parent div {
display: none;
cursor: default;
}
div.mytree div.parent {
cursor: pointer;
background: transparent url(http://www3.telus.net/jianlu58/plus.gif) no-repeat top left;
}
div.mytree div.expanded {
background: transparent url(http://www3.telus.net/jianlu58/minus.gif) no-repeat top left;
}
</style>
</head>
<body>
<div class="mytree" style="padding:22px;border:2px solid #ccc;width:10%;font-family:Arial;font-size:12px;">
<div>
Theory
<div>Introduction</div>
<div>
Economics
<div>
Economists
<div><a href="#Cantillon_Richard">Cantillon, R</a></div>
<div><a href="#Thornton_Henry">Thorton, H</a></div>
</div>
<div>
Schools
<div>Keynesian</div>
<div>Austrian</div>
<div>Marxian</div>
</div>
<div>
Journals
<div>American Economic Review</div>
</div>
<div>
Glossary
<div><a href="#CantillonEffect">Cantillon Effect</a></div>
<div>Ricardian Equivalence</div>
</div>
</div>
<div>
Finance
<div>
Institutions
<div>
Public
<div>IMF</div>
<div>World Bank</div>
<div>BIS</div>
<div>WTO</div>
</div>
</div>
</div>
</div>
</div>
<div class="mytree" style="padding:22px;border:2px solid #ccc;width:10%;font-family:Arial;font-size:12px;">
<div>
Market Data
<div>
Static Data
<div>Sources</div>
<div>
Central Banks
<div>Bank of England</div>
<div>Federal Reserve</div>
<div>ECB</div>
</div>
<div>
Data Categories
<div>FX Rates</div>
<div>Interest Rates</div>
<div>Equities</div>
<div>Commodities</div>
<div>Wages</div>
<div>Inflation</div>
</div>
</div>
<div>
Dynamic Data
<div>FX Rates</div>
<div>Interest Rates</div>
<div>Equities</div>
<div>Commodities</div>
<div>Wages</div>
<div>Inflation</div>
</div>
</div>
</div>
<div class="topic_viewer" style="top:50px;padding:22px;border:2px solid #ccc;width:90%;font-family:Arial;font-size:12px;">
Click on a topic on the left and this pane will be populated
</div>
<div class="AllTopics">
<!-- in production we'll use display:none to hide all this content -->
<div id="AustrianTheoryOfBusinessCycles">
<h1>Austrian Theory Of Business Cycles</h1>
<a href="https://www.imf.org/external/pubs/ft/wp/2002/wp0202.pdf">The Austrian Theory of Business Cycles: Old Lessons For Moden Economic Policy?</a>
</div>
<div id="Cantillon_Richard">
<h1>Richard Cantillon</h1>
<h2>1680-1815</h2>
<a href="https://mises.org/books/paper_credit_thornton.pdf">An Enquiry into the Nature and Effects of the Paper Credit of Great Britain (written 1730 published 1755)</a>
<a href="http://en.wikipedia.org/wiki/Richard_Cantillon">Richard Cantillon Wikipedia </a>
<a href="http://mises.org/daily/4190">The Business Cycle Explained in 1755 - Richard Cantillon - Mises Daily</a>
<a href=" #cantilloneffect">Cantillon Effect</a>
</div>
<div id="CantillonEffect">
<h1>Cantillon Effects</h1>
<a href="http://wiki.mises.org/wiki/Richard_Cantillon#Cantillon_effects">Cantillon effects are the real fundamental changes in resource allocation that result from changing relative prices between the time of the creation of new money and the full adjustment to the increase in supply.</a>
<a href="http://www.zerohedge.com/news/guest-post-cantillon-effect">Guest Post: The Cantillon Effect | Zero Hedge</a>
</div>
<div id="Thornton_Henry">
<h1>Henry Thornton</h1>
<h2>1760-1815</h2>
<a href="http://en.wikipedia.org/wiki/Henry_Thornton_%28reformer%29">Thornton_Henry Wikipedia </a>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
使用jQuery很容易通过ID获取div - 只需执行$（'＃my_id'），这将为您提供此div的jQuery表示：
<div id="my_id">
所以要从源中复制HTML
<div id="src_id">
到目的地
<div id="dest_id">
看起来像这样：
$('#dest_id').html(
$('#src_id').html()
)
一个非常有用的链接供您阅读：
http://api.jquery.com/category/selectors/
它会告诉你关于jQuery选择器的所有信息。如果您了解XPath，您很快就会了解如何使用jQuery访问DOM。
答案 1 :(得分：1)
一些事情。您可以使用jQuery attr语法而不是使用anchor[0]放入原始DOM元素。您还应该在jQuery事件对象上使用jQuery的preventDefault方法，而不是返回false。最后，您可以使用方法html来获取内容而不是innerHTML：
$('.mytree div').click(function (e) { // 'e' is a jQuery event
e.preventDefault(); // instead of return false
var thistree = $(this);
thistree.children('div').toggle();
thistree.filter('.parent').toggleClass('expanded');
var anchor = thistree.children('a');
if (anchor.length > 0) {
var topic = anchor.attr('href'); // instead of anchor[0].hash
var topicContents = $(topic); // jquery ID selector
$('div.TopicViewer').html( topicContents.html() );
}
});
文档：