Порядок добавления jQuery html неверен, кнопка должна быть внутри div - PullRequest
0 голосов
/ 05 апреля 2020

Я хочу показать html, используя jQuery добавление в этот div с идентификатором tablebody:

<div id="TableBody">

Но проблема в том, что кнопка добавления jQuery не в порядке

Вот что я пытался добавить html с jQuery:

 $(divsrt).html("");
    for (i = content.length - 1; i >= 0; i--) {
        let obj = content[i];
        // var codeBlock = '<div class="card"> <div class="card-content">  <div class="card-body"> <div class="media">' + '<a class="media-left"  href="#">'
        // + '<img class="media-object rounded-circle"  src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" alt="Generic placeholder image" style="width: 64px;height: 64px;">' + '</a>'
        // + '<div class="media-body">' +
        //           '<div class="media-heading text-bold-600">' + '<a href="#">' + obj.Name + '</a>' + '</div>' + obj.Comment +
        //       '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
        // $(divsrt).append(codeBlock);

        var codeBlock = '  <div class="card">  <div class="card-content"> <div class="card-body">  <div class="media mb-4"> ' +
                        '<img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt="">' +
                        ' <div class="media-body">' + 
                        '<a href="@Url.Action("Profile","HomeBlog",new { username = Model.Content })">' + 
                        '<h5 class="mt-0">' + obj.Name + '</h5>' +
                        ' </a> <span class="text-muted">Last Hours ago</span>' + '<p>' + obj.Comment + '</p>';
        var closing = '</div> </div> </div> </div> </div>';

        $(divsrt).append(codeBlock + closing);

        $(divsrt).find(".media-body").append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>")
       .append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>");
    }

Это html, которое я получаю

<div id="TableBody">  
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="media mb-4">
                    <img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt="">
                    <div class="media-body">
                        <a href="@Url.Action(" profile","homeblog",new="" {="" username="Model.Content" })"="">
                            <h5 class="mt-0">makkarim07@gmail.com</h5> 
                        </a>
                        <span class="text-muted">Last Hours ago</span
                        <p>213sadsADasd</p>
                    </div>
                </div>
            </div><!--//END .card-body //-->
        </div>
    </div>
    <a class="btn btn-sm btn-danger">Delete</a>
    <a class="btn btn-sm btn-info">Update</a>    
</div>

это не то, что я ожидал, я хочу, чтобы кнопка обновления и удаления была внутри карты, но она снаружи

вот что я ожидал

   <div id="TableBody">  
        <div class="card">  
            <div class="card-content"> 
                <div class="card-body"> 
                    <div class="media mb-4"> 
                        <img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt=""> 
                        <div class="media-body">
                            <a href="@Url.Action(" profile","homeblog",new="" {="" username="Model.Content" })"="">
                                <h5 class="mt-0">makkarim07@gmail.com</h5> 
                            </a> 
                            <span class="text-muted">Last Hours ago</span>
                            <p>213sadsADasd</p>

                            <a class="btn btn-sm btn-danger">Delete</a>
                            <a class="btn btn-sm btn-info">Update</a>  
                        </div>
                    </div>
                </div><!--//END .card-body //-->
            </div>
        </div>  
 <div class="card">  
            <div class="card-content"> 
                <div class="card-body"> 
                    <div class="media mb-4"> 
                        <img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt=""> 
                        <div class="media-body">
                            <a href="@Url.Action(" profile","homeblog",new="" {="" username="Model.Content" })"="">
                                <h5 class="mt-0">makkarim07@gmail.com</h5> 
                            </a> 
                            <span class="text-muted">Last Hours ago</span>
                            <p>213sadsADasd</p>

                            <a class="btn btn-sm btn-danger">Delete</a>
                            <a class="btn btn-sm btn-info">Update</a>  
                        </div>
                    </div>
                </div><!--//END .card-body //-->
            </div>
        </div>  
 <div class="card">  
            <div class="card-content"> 
                <div class="card-body"> 
                    <div class="media mb-4"> 
                        <img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt=""> 
                        <div class="media-body">
                            <a href="@Url.Action(" profile","homeblog",new="" {="" username="Model.Content" })"="">
                                <h5 class="mt-0">makkarim07@gmail.com</h5> 
                            </a> 
                            <span class="text-muted">Last Hours ago</span>
                            <p>213sadsADasd</p>

                            <a class="btn btn-sm btn-danger">Delete</a>
                            <a class="btn btn-sm btn-info">Update</a>  
                        </div>
                    </div>
                </div><!--//END .card-body //-->
            </div>
        </div>  
    </div>

Кнопка обновления и удаления внутри тела карты

1 Ответ

0 голосов
/ 05 апреля 2020

Это происходит потому, что метод jquery .append() всегда вставляет новое содержимое, указанное параметром, в конец каждого элемента. Одним из способов решения этой проблемы является .append() кнопка Обновить и удалить внутри класса media-body, например:

$(divsrt).find(".media-body")
    .append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>")
    .append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>");

вместо добавления ее к TableBody:

$(divsrt).append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>")
    .append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>");

Итак, полный код будет выглядеть так:

var codeBlock = '....'; // all current html string here
var closing = '</div> </div> </div> </div> </div>';

// You can append both opening and closing tags together
$(divsrt).append(codeBlock + closing);

$(divsrt).find(".media-body")
    .append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>")
   .append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>");

РЕДАКТИРОВАТЬ:

Мы можем исправить последнюю проблему, сначала создав родительский класс внутри l oop как:

let parent = `card${i}`;

Этот класс будет просто использоваться, чтобы мы могли обновить селектор .find(...), чтобы он указывал на спецификацию c card внутри l oop. Затем нам нужно добавить класс к codeBlock, например:

var codeBlock = '  <div class="card ' + parent + '">  <div class="card-content"> .... ';

Итак, card div будет иметь дополнительный класс, например card1, card2 и т. Д.

И, наконец, мы обновим $(divsrt).find(".media-body") как:

$(divsrt).find("." + parent + " .media-body")

Это сделано для того, чтобы мы могли добавлять кнопки «Обновить» и «Удалить» только к текущему card вместо всех ранее добавленных card с.

Итак, полный код будет выглядеть так:

for (i = content.length - 1; i >= 0; i--) {
   let obj = content[i];
   let parent = `card${i}`;

   var codeBlock = '  <div class="card ' + parent + '"> <div class="card-content"> .... ';
   var closing = '</div> </div> </div> </div> </div>';

   $(divsrt).append(codeBlock + closing);

   $(divsrt).find("." + parent + " .media-body")
      .append($("<a>").addClass("btn btn-sm btn-danger")
         .html("Delete").on("click", obj, Delete)).append("</a>")
      .append($("<a>").addClass("btn btn-sm btn-info")
         .html("Update").on("click", obj, Update)).append("</a>");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...