1

親で<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>
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

を呼び出した後.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 に答える
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 に答える