Question

我有这个隐藏的代码块，我想根据从服务器接收的值来调用：

<div id="hiddenChart" style="display:none;">
    <li style="height:auto;">
        <div class="col-sm-4" id="chart_0_0">
            <div class="panel panel-success" style="width:550px; height:auto;" id="accordion_0_0">
                <div class="panel-heading">
                    <div class="btn-group" style="float:right;">
                        <i class="glyphicon glyphicon-minus" id="minimize_0_0"></i>
                        <i class="glyphicon glyphicon-remove" id="close_0_0"></i>
                    </div>
                    <h3 class="panel-title">title</h3>
                </div>
                <div class="panel-body" style="height:400px;">
                    <nvd3-multi-bar-chart data="Sec1Graf1Data" id="dataChart_0_0" height="400" showXAxis="true" reduceXTicks="true" showYAxis="true" showLegend="true" showControls="true" tooltips="true">
                        <svg></svg>
                    </nvd3-multi-bar-chart>
                </div>
            </div>
        </div>
    </li>
</div>

但我需要更改一些值：ids，tags，data variables。

我知道如何使用"$('ul').append($('div').html());"显示代码，但我必须在执行前更改它。

我该怎么做？

如何定义我必须插入哪些字段？

THK

更新：

我能够把它付诸实践，这里是它的小提琴fiddle。当我检查元素时，我想要更改的ID而不是＃1，它返回chart_0_0。

感谢大家的帖子和帮助

Answer 1

您可以像这样获得对div的引用：

var $div = $('#hiddenChart');

要克隆它，

var $clonedDiv = $div.clone();

然后，在$ cloneDiv对象中，进行更改：

$clonedDiv.find(--selector of a node--).attr(atributeName, atributeValue); //change/add attribute
$clonedDiv.find(--selector of a node--).removeAttr(atributeName); //remove attribute

等等。我不会解释jQuery是如何工作的，Lekhnath给了你一个链接。

最后，您可以在任意位置插入带有.appendTo（）的$ clonedDiv。原始div保持不变，因此您可以反复克隆它。

Answer 2

Jquery从隐藏的div内容中更改text / html：

简单

维护隐藏内容的副本
使用服务器响应
然后将html粘贴到另一个div
将隐藏的内容替换为原始（可选）

http://jsfiddle.net/austinnoronha/ZJ3Nt/

$(document).ready(function(){

        var serverRes = {
            title: "New Title In Header",
            body: "New body text from server <\/br><nvd3-multi-bar-chart data=\"Sec1Graf1Data\" id=\"dataChart_0_0\" height=\"400\" showXAxis=\"true\" reduceXTicks=\"true\" showYAxis=\"true\" showLegend=\"true\" showControls=\"true\" tooltips=\"true\"><svg><\/svg><\/nvd3-multi-bar-chart>"
        };

        var tmpOldCont = $("#hiddenChart").html();

        var counter = 1;
        $(".serverres").click(function(){

            $("#hiddenChart").find(".panel-body").html(counter + " = " + serverRes.body);
            $("#hiddenChart").find(".panel-title").text(serverRes.title + " " + counter);
            counter++;

            $(".box-container").html($("#hiddenChart").html());
            $("#hiddenChart").html(tmpOldCont);
        });


    });

如何更改隐藏的html代码块中的值

2 个答案: