Question

我正在尝试在<div>上使用empty()为其添加内容。但不知何故，它不会工作。为什么不这样做？如果我不使用empty()的话。但是为什么不在使用empty()

之后

我正在尝试清空包含链接.acceptUser或.rejectUser的父级并添加新链接。新内容需要进入parent div

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript" src="http://localhost/site/scripts/rsCore.js"></script>
<script type="text/javascript" src="http://localhost/site/scripts/jquery.validate.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('.acceptUser, .rejectUser').click(function() {

    var action = $(this).attr('class');
    var type = $(this).data('id');

    console.log(action+' '+type);
    console.log($(this).parent());

    $(this).parent("div").empty();
    // Wont work : $(this).parent("div").after("<div class='flag'>Success</div>");
    // Wont work : $(this).parent("div").append("<div class='flag'>Success</div>");


  });
});

</script>
</head>
<body>

<div id="container">
UserName : Norman | SignedUp: 10-09-2013 | SignedUp Location: US

<div class="adminLinks">
    <span class="acceptUser" data-id="24">Accept</span>
    <span class="rejectUser" data-id="24">Reject</span>
</div>

</div>

</body>
</html>

Answer 1

试试这段代码，

$(document).ready(function () {
    $('.acceptUser, .rejectUser').click(function () {
        var action = $(this).attr('class');
        var type = $(this).data('id');
        console.log(action + ' ' + type);
        console.log($(this).parent());
        var parentTag = $(this).parent("div");
        parentTag.empty();
        parentTag.after("<div class='flag'>Success</div>");
        parentTag.append("<div class='flag'>Success</div>");
    });
});

http://jsfiddle.net/E8UVE/

Answer 2

将$(this).parent("div").empty();存储到变量中，因为它在empty()

之后无法使用

所以

var $parent = $(this).parent("div");    
 $parent.empty();
 $parent.after("<div class='flag'>Success</div>");
 $parent.append("<div class='flag'>Success</div>");

Answer 3

调用.empty后，父子关系将丢失。 .empty删除元素的所有子元素。下次调用.parent('div')时，您将返回一个空的jQuery对象，因为this不再有父级了。

最简单的解决方案是使用方法链：

$(this).parent("div")
  .empty()
  .after("<div class='flag'>Success</div>")
  .append("<div class='flag'>Success</div>");

在使用empty（）之后无法向div添加内容

3 个答案: