Question

执行以下操作后：$hold=$('<div>').load('page.php #somediv)我正在尝试删除名为removediv的html中的元素，具体取决于Cookie的值。我试过了：

if ($.cookie('mycookie') !== null){
$hold=$hold.not('#removediv');
}else{
document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"
}
$('#divtwo').html($hold);

但即使设置了cookie，removediv元素也会显示出来。我也试过了$hold.find('#removediv').remove()，但这也行不通。

有什么想法吗？

编辑：$ hold html如下所示：

<div>
 <div id="somediv">
  <div id="removediv" class="stuff"></div>
  <div id="okdiv" class="stuff"></div>
  <div id="okdiv" class="stuff"></div>
  <div id="okdiv" class="stuff"></div>
 </div>
</div>

Answer 1

这是我最好的猜测如何使这项工作。使用remove从html片段中删除removediv，并将代码放入load方法的“完整”回调中：

$hold = $('<div>').load('page.php #somediv', function(response, status, xhr) {
    if ($.cookie('mycookie') !== null){
        $hold.find('#removediv').remove();
    } else {
        document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"
    }
    $('#divtwo').html($hold);
});

Answer 2

尝试在回调函数中执行此操作

$('<div>').load('page.php #somediv', function(data) {
  $hold = data;

  if ($.cookie('mycookie') !== null){
    $hold.find('#removediv').remove();
   } else {
    document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"
   }
   $('#divtwo').html($hold);


});

Answer 3

这就是为什么事情不适用于你的例子：

load()是异步通话，因此您只需在通话结束时继续接受治疗
$hold.find('#removediv').remove()只会选择div，而不是实际删除它

为了您需要的代码，可以使用callback和end，如下所示：

<script>
$(function() {
  $("#l").click(function() {

    var url = 'b.htm';

    $("#content").load(url + " #somediv", function(data) {

      var allHtml = $(data),
          newHtml = allHtml.find("#removediv").remove().end();

      console.log(newHtml.html());
    });

  });
});
</script>

假设您有一个包含此html的文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title>Stackoverflow example</title>
</head>
<body>
  <h1>Hello</h1>

  <a href="#" id="l">load content</a>
  <div id="content">Empty</div>

</body>
</html>

和b.htm已

<div>
 <div id="somediv">
  <div id="removediv" class="stuff">A</div>
  <div id="okdiv" class="stuff">B</div>
  <div id="okdiv" class="stuff">C</div>
  <div id="okdiv" class="stuff">D</div>
 </div>
</div>

输出将是（在Firefox中，因为Chrome是阻止调用b.htm作为跨域调用，因为它是本地文件）

enter image description here

输出显示：

console.log('data');
console.log(data);  
console.log('newHtml');
console.log(newHtml.html());

如果您需要查看这两个文件，请
Example is on my Dropbox。

使用您自己的代码：

$(function() {

    $('<div/>').load('page.php #somediv', function(data) {

        // 'data' has the page.php #somediv part
        var allHtml = $(data);

        if ($.cookie('mycookie') !== null)
            allHtml = allHtml.find("#removediv").remove().end();
        else
            document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"

        $('#divtwo').html(allHtml);
    });
});

如何从Jquery对象中删除元素

3 个答案: