1

执行以下操作后：$hold=$('<div>').load('page.php #somediv)我正在尝试删除该 html 中removediv根据 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);

但removediv即使设置了 cookie，该元素也会始终显示。我也试过$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>
4

3 回答 3

2

这是我对如何完成这项工作的最佳猜测。用于从 html 片段remove中删除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);
});
于 2013-03-17T23:16:57.837 回答
0

尝试在这样的回调函数中这样做

$('<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);


});
于 2013-03-17T23:17:16.363 回答
-1

这就是为什么事情不适用于您的示例：

  • 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作为跨域调用，因为它是本地文件）

在此处输入图像描述

输出显示：

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

如果您需要查看这两个文件，示例在我的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);
    });
});
于 2013-03-17T23:18:09.060 回答