在将它们保存到数据库之前从 HTML 元素中删除 ID

Question

我正在开发一个可以保存用户创建的 HTML 模板的应用程序。在这里，用户可以使用一些 HTML 组件，并且可以使用这些组件创建静态 HTML 页面。

我正在使用 javascript 函数自动保存页面内容。

     function saveContent(){    
        //var getContent=$('#mainWrap').children().removeAttr('id');
        var $getContent=$('#mainWrap');
        var $finalContent=$getContent.children().removeAttr('id');
        var auto="auto";
        var pageId = <?php echo $pageId;?>; 
        var webId  = <?php echo $webId;?>;
        var userId = <?php echo $userId;?>;
        $.ajax({
            url:"auto_save.php",
            type:"POST",
            dataType:"text",
            data:"txtComp="+$('#mainWrap').html()+"&auto="+auto+"&pageId="+pageId+"&webId="+webId+"&userId="+userId
        }); 
    }   

    var interval = 1000 * 60 * 0.30; // where X is your every X minutes
    setInterval(saveContent,interval);

问题：我想从用户保存的 HTML 组件中删除 ID，因为 ID 是自动生成的，并且在用户发布模板时不需要 （创建后在他的域上）。我有一个包装整个页面的主包装器，称为id=mainWrap。如果我尝试删除像 $('#mainWrap').children().removeAttr('id'); 这样的 ID，它们也会从 DOM 的当前上下文中删除，即它们会从用户正在编辑其模板的页面中删除。

问题：如何在不影响mainWrap 对象的当前上下文的情况下从 HTML 元素中删除 ID？

我尝试将它分配给像这样的另一个对象

    var $getContent=$('#mainWrap');
    var $finalContent=$getContent.children().removeAttr('id');

但还是失败了。

关于这是否可能的任何 cmet 或更正？还是我走错了路？

更新：问题在一定程度上得到了解决。 接下来我想在用户返回编辑页面时添加 id。 我使用此代码获取上述保存的内容

    <?php
    $sqlEdit = "select revisionContent from tbl_revision where revisionId='".$_SESSION['contentId']."'"; //The query to get the record
    $rsEdit = $dbObj->tep_db_query($sqlEdit);//The database object to execute the query   
    $resEdit = $dbObj->getRecord($rsEdit);                                                                                       
    $IdLessContent = $resEdit['revisionContent'];//Variable with the record

     ?>

现在，我想在 javascript 中使用这个 PHP 变量，所以我这样做了。

  <script language="javascript">
    var getSavedContent = '<?php echo json_encode($IdLessContent); ?>';
    var trimmedCont=($.trim(getSavedContent).slice(1));
    //console.log(trimmedCont);
    var lengthCont= trimmedCont.length;
    var trimmedCont=$.trim(trimmedCont.slice(0,lengthCont-1));
    var pageContent=$('<div class="addId">').append(trimmedCont);  //Here I tried creating a div dynamically and appending the content to the div.But now I am not able to manipulate or work on this dyamic div and get NULL when I alert saying $('.addId').html();
    $('.addId').children().attr('id', 'test');               //I tried doing this but does not work

这行不通。你能解释一下吗

Answer 1

您可以循环浏览#mainWrap 中的元素并删除id，例如：

var getContent = $('#mainWrap');
var finalContent = getContent.parent().clone().find('*').removeAttr('id');

示例：http://jsfiddle.net/7m8g4/6/

出于安全考虑，您应该意识到这是一个客户端脚本，它正在从 html 中删除 id 属性。虽然有一些方法可以操纵 JavaScript 或通过（例如）直接使用虚假数据调用 Ajax 请求中的 URL 来绕过它。

所以你永远不应该只依赖你的 JavaScript。如果由于任何原因 JavaScript 未按预期运行，请确保您的代码不会导致问题。例如，您可以通过搜索id 属性（使用regex）来执行此操作，并在仍然找到一些id 属性的情况下生成错误消息。另一种方法是在服务器端（在 PHP 中）删除它们（如果找到的话）。为此，您可以进行正则表达式搜索并用空字符串或使用子字符串替换匹配项。由你决定！

希望这一切都有意义！

编辑

如果您想稍后添加新的 id 属性，您可以执行以下操作：

var newContent = $(finalContent).first().wrap('<div class="addId" />');
newContent = $(newContent).parent().find('*').each(function(index, value) {
   $(this).attr('id', index);
});

在工作中看到here。