1

我正在尝试在其父级上<div>使用后将内容添加到 a 中。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>
4

3 回答 3

2

试试这个代码，

$(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/

于 2013-09-16T06:44:56.903 回答
1

存储$(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>");
于 2013-09-16T06:44:07.207 回答
1

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

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

$(this).parent("div")
  .empty()
  .after("<div class='flag'>Success</div>")
  .append("<div class='flag'>Success</div>");
于 2013-09-16T06:48:37.583 回答