Почему этот код не выводит ожидаемый результат? - PullRequest
0 голосов
/ 03 июля 2019

У меня есть следующий jQuery, который создает вложенные элементы DOM и добавляет его в текущий DOM.Но в результате элементы не совсем правильно вложены, а вывод немного визуально.

const urlHash = "example";
   				$("#myBookmarks").append(
				$('<div/>', {'class': 'bookmark list-group-item col-lg-3 col-md-4 col-sm-6 col-xs-12 clearfix','draggable': 'true'}).append(
					$('<div/>', {'class': ''}).append(
						$('<div/>', {'class': 'col-xs-9 col-sm-9 col-md-7', 'id': urlHash}).append(
					$('<a/>', {'href': linkURL, 'id': urlHash, 'draggable': 'false'}).append(
						t))).append(
					$('<div/>', {'class': 'text-right col-xs-3 col-sm-3 col-md-5'}).append(
						$('<a/>', {'class': 'btn btn-default glyphicon glyphicon-pencil edit'})).append(
						$('<button/>', {'class': 'btn btn-danger glyphicon glyphicon-remove delete'}))
					)
				)
			)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myBookmarks"></div>

Ожидаемые результаты:

<div class="bookmark list-group-item col-lg-3 col-md-4 col-sm-6 col-xs-12 clearfix" draggable="true">
    <div class="">
        <div class="col-xs-9 col-sm-9 col-md-7">
            <a href="https://amazon.com" id="-7946160306639565623" draggable="false">Amazon</a>
        </div>
        <div class="text-right col-xs-3 col-sm-3 col-md-5">
            <a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="#" draggable="false"></a>
            <button class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
        </div>
    </div>
</div>

Фактические результаты, когда элементы dom не совсем правильно вложены и такие:

<div class="">
    <div class="col-xs-9 col-sm-9 col-md-7" id="[object HTMLInputElement]"><a href="https://amazon.com" id="55555"
            draggable="false">Amazon</a></div>
    <div class="text-right col-xs-3 col-sm-3 col-md-5"><a
            class="btn btn-default glyphicon glyphicon-pencil edit"></a><button
            class="btn btn-danger glyphicon glyphicon-remove delete"></button></div>
</div>

1 Ответ

0 голосов
/ 03 июля 2019

Я бы сделал это таким образом, а не длинной цепочкой добавления.

const urlHash = "example";
const linkURL = "https://amazon.com";

var emptyCLassDiv = appendAndGetElement($("#myBookmarks"), 'div', {
    'class': 'bookmark list-group-item col-lg-3 col-md-4 col-sm-6 col-xs-12 clearfix',
    'draggable': 'true'});

var firstDivChild = appendAndGetElement(emptyCLassDiv, 'div', {
    'class': 'col-xs-9 col-sm-9 col-md-7',
    'id': urlHash
});

appendAndGetElement(firstDivChild, 'a', {
   'href': linkURL,'id': urlHash,'text': 'Amazon','draggable': 'false'
});

var secondDivChild = appendAndGetElement(emptyCLassDiv, 'div', {
   'class': 'text-right col-xs-3 col-sm-3 col-md-5'
});

appendAndGetElement(secondDivChild, 'a', {
  'class': 'btn btn-default glyphicon glyphicon-pencil edit',
  'role': 'button',
  'title': 'Edit Bookmark',
  'href': '#',
  'draggable': 'false'
});

appendAndGetElement(secondDivChild, 'button', {
   'class': 'btn btn-danger glyphicon glyphicon-remove delete',
   'title': 'Delete Bookmark'
});

function appendAndGetElement($parentEle, eleType, attr) {
   var newEle = $('<' + eleType + '/>', attr);
  $parentEle.append(newEle);
  return newEle;
}

Но если вам абсолютно необходимо оригинальное решение с длинной цепочкой присоединения.Вот скрипка , которая создает необходимый HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...