appendTo в JQuery
Всем доброго времени суток:)
Имеется нумерованый список ul: <ul id="main">
<img onclick="getTreeMain('main');" class="imgTree" src="./resources/image/03.png" /> Тык ми!
</ul>
При нажатии на картинку выполняется следующий код: function getTreeMain(w)
{
$.ajax({
type: 'POST',
data: "object="+w,
async: true,
url: './engine/modules/getData/getTree.php',
dataType: 'Json',
success: openTreeObj
});
}
function openTreeCdng(data)
{
for (var i = 0; i < data.length; i++)
{
$("<ul><img id= \"oid_"+data[i].objId+"\" onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>").appendTo("#main");
}
}
Все отрабатывает и к элементу ul "main" достраиваются дочерние объекты нумерованного списка. В каждом из которых так же имеется изображение с индивидуальным ID, при нажатие на которое дочка получает свои дочерние элементы. Код: function getTreeObj(w)
{
$.ajax({
type: 'POST',
data: "object="+w,
async: true,
url: './engine/modules/getData/getTree.php',
dataType: 'Json',
success: openTreeObj
});
}
function openTreeObj(data)
{
for (var i = 0; i < data.length; i++)
{
$("<ul><img onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>").appendTo("#oid_"+data[i].objId);
}
}
Но к дочкам объекта "main", элементы не добавляются. Вижу что обращение к серверу есть, и json массив с данными возвращается, обращаюсь к правильно указанным id. Ощущение, что они рпосто не видятся.:blink: Прощу помощи советом!=) |
wUI,А чо Вы хотите этим добица ?
Почему .appendTo - а не append ? http://jquery-docs.ru/Manipulation/appendTo/#selector http://jquery-docs.ru/Manipulation/append/#content |
Deff,
наверное не понятно объяснил. :)Своего рода это дерово объектов. Изначально существует родитель "main", при нажатие на него получаю его подобъекты и они красиво отстраиваются, при нажатии на подобъект он должен получить от серва свои дочерние объекты и их остроить, но этого не происходит. О_о |
Пробовал следующие варианты:
1. $("#oid_"+data[i].objId).append("<ul><img onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>");
2. document.getElementById('oid_'+data[i].objId).innerHTML+="<ul><img onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>"
Оба не выходят О_о И вот вопрос, почему динамически полученные дочерние объекты достраиваются к жестко прописанному объекту "main", а далее по иерархии нет, т.е. дочерний объект к себе не привязывает своих дочек? Будно динамически отсроеные дочки родителя "main" не видятся. |
Вот пример кода, чтобы понятней было, который можно запустить у себя:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег UL</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style type="text/css">
ul {
list-style-type: none;
margin-left: 10px;
}
li {
list-style-type: none;
margin-left: 10px;
}
img {
cursor: pointer;
}
</style>
<script type="text/javascript">
function getTreeMain(w) {
for (i = 0; i < w; i++) {
$("#main").append("<ul><img id= \"oid_"+i+"\" onclick = \"getTreeObj("+i+");\" src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_0_"+i+"</ul>");
}
}
function getTreeObj(w) {
for (i = 0; i < w; i++) {
$("#oid_"+i).append("<ul><img id= \"oid2_"+i+"\" src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_1_"+i+"</ul>");
}
}
</script>
</head>
<body>
<ul id="main"><img onclick="getTreeMain(5);" src="http://best-iconki.ru/downloads/PNG/32/programms-0002-1.png"></br>
</ul>
</body>
</html>
|
Цитата:
И второе - У Вас повторяются id - что - не Айс - селектор $("#oid_"+i).будет искать только первый и единственный такой id Возможно устроит подобное.. : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег UL</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style type="text/css">
ul {
list-style-type: none;
margin-left: 10px;
}
li {
list-style-type: none;
margin-left: 10px;
}
img {
cursor: pointer;
}
</style>
<script type="text/javascript">
function getTreeMain(w) {
for (i = 0; i < w; i++) {
var obj = '<ul><img id="oid-0-'+i+'" onclick ="getTreeObj('+i+',this)"';
obj+= 'src="http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png" />';
obj+= 'daughter-0-'+i+'</ul>';//alert(obj)
$("#main").append(obj);
}
}
var J=0; //Добавил для Уникальности id
function getTreeObj(w,a) {//alert("A")
J++;
for (i = 0; i < w; i++) {
var obj = '<ul><img id="oid2-'+J+'-'+i+'"';
obj+= 'src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png"'
//obj+= 'onclick ="getTreeObj('+J+',this)"'; //можно раскомментить строку
obj+= ' />daughter-'+J+'-'+i+'</ul>';//alert(obj)
$(a).after(obj);
}
}
</script>
</head>
<body>
<ul id="main"><img onclick="getTreeMain(5,this)" src="http://best-iconki.ru/downloads/PNG/32/programms-0002-1.png"></br>
</ul>
</body>
</html>
|
Deff,
Спасибо, Вы как всегда на высоте!=) Указать ошибку долбошарому и вправить руки криворукому! Не понимаю как не заметил того, что пытался привязать элементы дочернии картинке! :D В итоге оставлю вот так: function getTreeMain(w) {
for (i = 0; i < w; i++) {
$("#main").append("<ul id= \"oid_"+i+"\"><img onclick = \"getTreeObj("+i+");\" src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_0_"+i+"</ul>");
}
}
function getTreeObj(w) {
for (i = 0; i < w; i++) {
$("#oid_"+w).append("<ul id= \"oid2_"+i+"\"><img src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_1_"+i+"</ul>");
}
}
|
| Часовой пояс GMT +3, время: 20:26. |