Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2017, 19:17
Аспирант
Отправить личное сообщение для Tanya51 Посмотреть профиль Найти все сообщения от Tanya51
 
Регистрация: 09.07.2017
Сообщений: 49

Функция, которая добавляет разметку на страницу
Задача:
Создайте объект, описывающий html-разметку. Напишите функцию, которая добавляет разметку в произвольный контейнер на странице.

разметка:
<section id="methods">
	<article>
		<h1>Array.prototype.every()</h1>
		<p>Метод every() проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.</p>
	</article>
	<article>
		<h1>Array.prototype.some()</h1>
		<p>Метод some() проверяет, удовлетворяет ли хоть какой-нибудь элемент массива условию, заданному в передаваемой функции.</p>
	</article>
	<article>
		<h1>Array.prototype.reduce()</h1>
		<p>Метод reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.</p>
	</article>
	<article>
		<h1>Array.prototype.reduceRight()</h1>
		<p>Метод reduceRight() применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.</p>
	</article>
</section>




мой js:
var tree={
  tag:'section',
  id: 'methods',//это атрибут тега section
  children:{
    children:{
      tag: 'article',
      children:{
        tag: 'h1',
        content: 'Array.prototype.every()',
      },
      children:{
        tag: 'p',
        content: 'Метод every() ...',
      },
    },
    children:{
      tag: 'article',
      children:{
        tag: 'h1',
        content: 'Array.prototype.some()',
      },
      children:{
        tag: 'p',
        content: 'Метод some() ...',
      },
    },
  },
}

function buildTree(tree, target) {
  for (var key in tree) {
    var item=tree[key];
    var $tag = $('<' + item.tag + '>').appendTo(target);

    if (item.children) {
          buildTree(item.children, $tag);
        };

    if (item.content) {
      $tag.text( item.content );
    };
  }
}

buildTree(tree, 'body');




мне на странице и в коде html выдает это:
html:
<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<title>doc</title>
		<script src="https://code.jquery.com/jquery-3.2.1.js" 
		integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
		crossorigin="anonymous"></script>
	</head>
	<body>
		
		<script src="js/script.js"></script>
                <undefined></undefined>
               <undefined>
                              <undefined></undefined>
                             <p>Метод some() ...</p>
               </undefined>
		
	</body>
</html>



На странице отображается текст "Метод some() ...".
Только последний тег р

Помогите разобраться. Что я не так прописываю?
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2017, 19:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Tanya51,
не бывает множества одинаковых ключей в обьекте, на одном уровне

{children: {}, children: {}}


можно только вложенные ключи одинаково назвать
{children: {children: {}}}
Ответить с цитированием
  #3 (permalink)  
Старый 16.07.2017, 19:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

html из обьекта
Tanya51,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
var tree=[{

    "tag": "SECTION",
    "children": [{
        "tag": "ARTICLE",
        "children": [{
            "content": "Array.prototype.every()",
            "tag": "H1"
        }, {
            "content": "Метод every() проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.",
            "tag": "P"
        }]
    }, {
        "tag": "ARTICLE",
        "children": [{
            "content": "Array.prototype.some()",
            "tag": "H1"
        }, {
            "content": "Метод some() проверяет, удовлетворяет ли хоть какой-нибудь элемент массива условию, заданному в передаваемой функции.",
            "tag": "P"
        }]
    }, {
        "tag": "ARTICLE",
        "children": [{
            "content": "Array.prototype.reduce()",
            "tag": "H1"
        }, {
            "content": "Метод reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.",
            "tag": "P"
        }]
    }, {
        "tag": "ARTICLE",
        "children": [{
            "content": "Array.prototype.reduceRight()",
            "tag": "H1"
        }, {
            "content": "Метод reduceRight() применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.",
            "tag": "P"
        }]
    }]
}]

function buildTree(tree, target) {
    tree.forEach(function(item) {
        var $tag = $('<' + item.tag + '>').appendTo(target);
        if (item.content) {
            $tag.text(item.content);
        };
        if (item.children) {
            buildTree(item.children, $tag);
        };
    })

}

$(function() {
buildTree(tree, 'body');
});


  </script>
</head>

<body>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2017, 20:29
Аспирант
Отправить личное сообщение для Tanya51 Посмотреть профиль Найти все сообщения от Tanya51
 
Регистрация: 09.07.2017
Сообщений: 49

Спасибо. Теперь я поняла в чем дело.
Надо было делать перебор элементов, а я искала элемент. И не правильно написала структура обьекта)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое создание iframe в Firefox mrbean11 Firefox/Mozilla 8 02.11.2012 21:23
Функция которая отменяет все обработчики и устанавливает свой itoldya jQuery 7 01.11.2012 22:09
Внешняя ссылка на страницу которая находится в IFRAME Модального окна плагина jQuery Андррр jQuery 0 07.12.2011 15:13
Не срабатывает функция, которая выводит fancybox. DeXtR Events/DOM/Window 0 22.04.2011 12:07
Функция которая работает на OnLoad не хочет работать на OnClick libinstyle Элементы интерфейса 6 23.03.2010 01:42