Раньше я задавал аналогичный (но другой) вопрос.
С тех пор я изменил свое отношение к проблеме.
Это мой JSON файл.
Вот мой javascript:
$(document).ready(function () {
var loadArticle = function (articleID, articleH) {
var article = $("#article").clone();
var thelist = '<dl id="article' + articleID + 'sections"></dl>';
$(article).attr("id", "article" + articleID);
$(article).append(articleH);
$(article).html(thelist);
return article;
}
var loadSection = function (articleID, sectionID, sectionContent) {
var section = "#article" + articleID + "sections";
$(section).append("<dt>Section " + sectionID + "</dt>");
$(section).append("<dd>" + sectionContent + "</dd>");
return section;
}
var loadConstitution = function (d) {
$.each(d, function (i) {
var articleID = i + 1;
var articleH = "<p class='lead' id='article" + articleID + "'><strong>Article " + articleID + "</strong></p>";
$("#constitutionHolder").append(loadArticle(articleID, articleH));
//$.each(d.sections, function(j){
// var sectionID = j + 1;
// var theSection = d.sections[j];
//$("#article" + articleID + "sections").append(articleID, sectionID, mySection);
//})
})
}
$.getJSON('data/stuff.json', loadConstitution);
})
В принципе, я просматриваю каждую точку данных и создаю новый <div>
с id="article1"
(или каким бы то ни было номером статьи). Затем, поскольку каждый объект статьи заполняется одним массивом "sections"
, мне нужно получить доступ к данным в этом массиве и добавить его в <dl></dl>
меня есть.
В моем HTML это то, что я .clone()
ing:
<div id="constitutionHolder">
<div class="alert text-black" id="article">
<p class="lead" id="articleHeader"><strong>Article 1</strong>
</p>
<dl id="sectionList"> <dt id="article_section">Section 1</dt>
<dd id="article_sectionINFO">this stuff belongs to section 1</dd>
</dl>
</div>
</div>
До сих пор у меня есть 2 проблемы:
$(article).append(articleH);
не работает
Я не могу загрузить разделы в sectionList
.
Как это исправить?
Есть много способов приблизиться к этому, но вот пример, который вы могли бы изменить в соответствии с вашим приложением: http://jsfiddle.net/DgU3w/. (Обратите внимание, что я удалил некоторые детали, чтобы попытаться понять проблему)
Несколько вещей, которые я заметил в вашем примере:
loadArticle()
clobbers некоторые работы с этим утверждением: $(article).html(thelist);
loadArticle()
клонирует блок HTML, но затем он добавляет новые элементы, которые соответствуют клонированным.$(jQueryObj)
), но это тоже не нужно.