reuse jquery clones in another div

Asked

Viewed 101 times

-1

I have a section of Html which is cloned and completed through jquery, however need to use the same cloned structure in another place keeping and clear the first cloned site, in case it would be two places with the same clones - I don’t know if it’s possible - but when I do it by adding the cloned structure to the new location it only appears in one place and not in the two places I want, I know that it is possible to clone structures with an angle with ease, but for some reasons I’m using the jquery, wanted to know an efficient way to solve this problem, and if it is correct to reuse the cloned structure and a new location.

jquery

function containerClones() {
/*public methods*/
var $atividadeContainerTasks = $(".containerTasks");
var $atividadeData = $(".descricaoData").clone(true);
var $atividadeDefaultask = $(".task").clone(true);
var $atividadetaskDetail = $(".taskDetail").clone(true);
var $containerBoxCalendario = $(".box-calendar").clone(true)
var $asideTarefascontainer = $(".asideTarefas");



/*private methods*/
function fillAtividadeController(atividade) {

    //$atividadeContainerTasks.append($atividadeData);

    $.each(atividade, function (index, item) {
        var taskDefaultClone = $atividadeDefaultask.clone();
     //    var asideDefaultClone = $atividadeDefaultask.clone();

        fillAtividadeWeek.call(this, item, taskDefaultClone);

       $asideTarefascontainer.append(taskDefaultClone);
       $atividadeContainerTasks.append(taskDefaultClone);

        //fillAtividadeWeek.call(this, item,asideDefaultClone);
       // $asideTarefas.append(asideDefaultClone);
    });
};
function fillAtividadeWeek(atividade, $atividadeDefaultask) {

    //$atividadeDefaultask.prop("id", "taskTitleText" + atividade.ID);
    $atividadeDefaultask.data("atividade", atividade);
    $atividadeDefaultask.find(".taskToDo").attr("data-target", "#task" + atividade.IdAtividadeAgenda);
    $atividadeDefaultask.find(".taskDetail").prop("id", "task" + atividade.IdAtividadeAgenda);


    $atividadeDefaultask.find(".atividadeQuinzenal").text(atividade.Descricao);
    $atividadeDefaultask.find(".autorAtividade").text(atividade.Descricao);
    $atividadeDefaultask.find(".detailTarefa").text(atividade.Descricao);

    $atividadeDefaultask.find(".detailObservacao").text(atividade.Descricao);
    $atividadeDefaultask.find(".taskTitleText").text(atividade.Descricao);

}
/*WS calls*/
function getAtividade() {

    var atividade = [
        {

            Descricao: "teste1",

        },
        {

            Descricao: "teste2",



        },
    ];
    fillAtividadeController(atividade);
}

html 

        <div class="m-b-15 containerTasks">
            <h4 class="descricaoData text-primary m-b-5">Hoje - 06 de Novembro
            </h4>
            <div class="panel panel-default task">
                <div class="panel-heading clearfix taskToDo" data-toggle="collapse" data-target="#collapse1">
                    <span class="taskTitle col-sm-10 col-xs-9">
                        <span class="checkTask"><i class="fa fa-check" aria-hidden="true"></i></span>
                        <span class="taskTitleText">limpeza da piscina</span>
                    </span>
                    <span class="col-sm-1 col-xs-2 text-center text-danger">01/10</span>
                    <span class="col-sm-1 col-xs-1 text-center">
                        <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
                    </span>
                </div>
                <div class="panel-collapse collapse taskDetail clearfix" id="collapse1">
                    <div class="taskForm">
                        <div class="pull-right">
                            <a href="#" class="trashBtn btn btn-default btn-sm"><i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;Excluir</a>
                        </div>
                        <small class="atividadeQuinzenal text-muted m-l-10">Atividade quinzenal, criada por <i class="autorAtividade">Autor</i></small>
                        <br />
                        <p class="detailTarefa">
                            detalhes <br />
                        </p>

                        <div class="ObsTask col-sm-12 col-xs-12">


                            <small class="textoObservacao text-muted">enviado: 07/11/17</small><br />
                            <p class="detailObservacao">observacao</p>
                        </div>

                        <div class="ObsTask col-sm-12 col-xs-12">
                            <div>


                                <small class="detailObservacao text-muted">enviado: 07/11/17</small><br />
                                <p class="detailObservacao">observacao</p>
                            </div>
                        </div>
                    </div>
                    <div class="SendObsTask col-sm-12 col-xs-12">
                        <div>
                            <textarea class="form-control" placeholder="Escreva uma observação" rows="2"></textarea>
                            <a href="#" class="btn btn-primary btn-sm m-t-5 pull-right">
                                <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;Enviar
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

New structure for clones

<div class="box-white clearfix m-t-15">
    <div id="calendar" class="col-sm-8 col-xs-12 nomargin nopadding">
    </div>
    <div class="col-sm-4 asideTarefas">
        <h1>Tarefas</h1>
    </div>
</div>
jquery html

  • I don’t quite understand what you want, but would it be something like this? https://jsfiddle.net/z4hhkLtb/

  • I recommend reading one of my answers about clone javascript: https://answall.com/a/4322/3082

  • I need to use a clone somewhere else

  • define "another place"

  • clone from one place and add the cloned div to another location in html

  • The example I sent you covers what you said. you clone the .clone and uses the .append() or .next() to add the div anywhere you want.

Show 1 more comment

1 answer

0


set a new variable for the clone using its properties elsewhere

var taskDefaultClone = $atividadeDefaultask.clone(true);
            var taskSubDefault = taskDefaultClone.clone(true);

            fillAtividadeWeek.call(this, item, taskDefaultClone);
            fillAtividadeWeek.call(this, item, taskSubDefault);

            $atividadeContainerTasks.append(taskDefaultClone);
        $containerSubTarefas.append(taskSubDefault)

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.