Question

我有一个如图所示的div

<div id="mycontainer">
    <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0">
         <h3>First Item</h3>

    </div>
    <div class="lastItm_Wrap" id="lastwrap644" data-lastwrapquan="0">
         <h3>Second Item</h3>

    </div>
</div>

如果mycontainer包含div lastwrap703，请告诉我如何更换或添加新的

我试过这种方式

   $(document).on('click', '.replaceoradd', function (e) {
    // update existing  lastwrap703 if exists inside mycontainer  or add new 

    var id = "703";

    if ($("#lastwrap" + id).length == 0) {  // doesn't exists
         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer).append(html);
    }

    else {
      $( "#mycontainer.lastwrap703").replaceWith( "<h2>New heading</h2>" );
    }

});

你能否告诉我如何完成这个

http://jsfiddle.net/673h38g9/28/

Answer 1

您需要在else部分设置新的html。您应该使用.html()代替.replaceWith()

 else {
  $( "#mycontainer.lastwrap703").html( "<h2>New heading</h2>" );
}

Answer 2

有多个问题

//replaceoradd is the id, so use id selector
$(document).on('click', '#replaceoradd', function (e) {

    var id = "703",
        $el = $("#lastwrap" + id);

    if ($el.length == 0) { // doesn't exists
        var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    } else {
        //use id selector here to find the element 
        $el.html("<h2>New heading</h2>");
    }

});

演示：Fiddle

Answer 3

你有很少的错误，你使用的是.replaceadd而不是#replaceadd，当你被＃mycontainer＆gt;时，你正在寻找＃mycontainer.lastwrap703。＃lastwrap + id，你必须关闭$（“＃mycontainer）中的”

代码修改：

$(document).on('click', '#replaceoradd', function (e) {
    // update existing  lastwrap703 if exists inside mycontainer  or add new 

    var id = "703";

    if ($("#lastwrap" + id).length == 0) {  // doesn't exists
         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    }

    else {
      $( "#mycontainer > #lastwrap"+id).replaceWith( "<h2>New heading</h2>" );
    }

});

JSFiddle已修复：https://jsfiddle.net/fpzeLa0a/

Answer 4

我测试了您的代码，代码的if部分工作正常。我注意到你的点击事件处理程序正在听类.replaceoradd，所以我不得不改变它，如下所示。另外，感谢Milind Anantwar指出else部分代码问题;所以我更改了代码的else部分。 Fiddle

$(document).on('click', '#replaceoradd', function (e) {
    // update existing  lastwrap703 if exists inside mycontainer  or add new 

    var id = "703";

    if ($("#lastwrap" + id).length == 0) {  // doesn't exists

         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    }

    else {

      $( "#mycontainer #lastwrap703").html( "<h2>New heading</h2>" );
    }

});

Answer 5

看起来你已经有了基本的想法，但是，你的代码中存在一些语法错误：

首先，您错过了#mycontainer选择器的结束语：$("#mycontainer).append(html);应为$("#mycontainer").append(html);
接下来，您将点击处理程序附加到.replaceoradd，它指定了一个类，但replaceoradd是您示例中的ID。您应该使用#replaceoradd。
最后，replaceWith的选择器略有偏离，#mycontainer.lastwrap703指定ID为mycontainer且类lastwrap703的元素。您的示例的正确选择器是#mycontainer #lastwrap703。同样，lastwrap703被指定为ID，并且是mycontainer的孩子。

值得一提的是，.replaceWith()将用新内容替换整个元素。这似乎不是你想要达到的目标。正如其他人所提到的，.html()将仅替换匹配元素的内部html。

工作jsfiddle：http://jsfiddle.net/km6c87m3/

Answer 6

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>

$(document).ready(function() { 
$( "#replaceoradd" ).click(function() {
alert("asdsads");
   if ($("#lastwrap703").length == 0) {  // doesn't exists
         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    }
	else
	{
	 $( "#lastwrap703").html( "<h2>New heading</h2>" );
	}
});
 
});
</script>

＆＃13;

如何根据其ID替换或更新div

6 个答案: