使用jquery动态地将id添加到html组件答案

【问题标题】：Adding id's to html components dynamically using jquery使用jquery动态地将id添加到html组件
【发布时间】：2013-01-23 11:04:47
【问题描述】：

我正在尝试自动保存我的页面内容并将其转储到数据库中。在插入之前，我想删除 HTML 元素的 id，因为它们是自动生成的，以后除了用户编辑它们的编辑页面之外不需要。（我已经做到了）但是，我面临的问题是当用户重新编辑页面时，我想再次添加 id。（通过我们编写的随机函数）。这就是我使用 PHP 从数据库中获取数据的方式

    <?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');               //Itried doing this but does not work

如何实现？我尝试添加动态 div，但失败了。DOM 有问题吗？我没有在 DOM 中获取动态 div 吗？请发表您的意见并分享想法。
感谢您的宝贵时间

【问题讨论】：

你试过用trimmedCont.find('.addId').html()代替$('.addId')吗？它出现在您尝试查找该 div 的位置，您实际上并未将 trimmedCont 添加到页面正文中。 $ 假设您在 document 上进行操作。
如果我没有完全错，trimmedCont 被附加到他想要访问的 div 中，所以 trimmedCont.find('.addId') 应该仍然是一个空数组。

标签： php javascript jquery mysql

【解决方案1】：

在 JS 控制台中运行它，你就会明白：

var some = $('<div class="myadd">');
some.append('<span>hey</span>');

console.log(some.html());
console.log($('.myadd').html());

some.children().attr('id', 'neat');

console.log(some.html());
console.log($('.myadd').html());

【讨论】：

这行得通@НЛО 但是这种行为的原因是什么？您能详细说明一下吗？感谢您的回复，我一直在摸索，想出了什么问题！
@coderunner 这是因为 jQ 将 $('.some-selector') 视为在 document 上下文中（如 @Khez 所述）。当您创建新元素并将其分配给变量时，您应该使用此变量来访问 jQ，或者将此确切元素附加到 body（有关示例，请参阅 api.jquery.com/append）
谢谢你的解释。现在我想给每个孩子一个唯一的 id，所以我有一个生成随机 id 的函数。但我不确定如何为每个孩子做主 div。你能帮我吗？
@coderunner 是这样的吗？ some.children('span').attr('id', function() {return Math.random()});
test.children().attr('id',"com-"+randomString()); 我尝试了类似的方法，但它为所有孩子附加了相同的 id 而不是唯一的随机！ :P 会尝试你的答案。谢谢

【解决方案2】：

你为什么不试试getJson jquery 函数。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    $.getJSON('x-request.php', function(data) {
        var items = [];
        $.each(data, function(key, val)
        {
            items.push('<li id="' + key + '">' + val.from + ' -> ' + val.to + '</li>');
        });
        $('<ul/>',
        {
            'class': 'my-new-list',
            html: items.join('')
        }).appendTo('body');
    });

});

</script>

并编写查询以获取x-request.php 中的json_encode 字符串

【讨论】：

请不要我只是给出了使用 jquery 从后端获取 json 的视觉效果，而不是在 getJson 回调函数中，您需要添加代码。

【解决方案3】：

我认为问题在于，您动态创建了 div，但您没有将其附加到您的 document.body 或类似的东西上。因此，您的选择器根本找不到 DOM 中的元素。但即使没有将动态创建的 div 添加到 DOM，也应该可以直接访问它，所以 pageContent.children().attr('id', 'test'); 应该可以工作，但这会为 div 的所有子项分配一个 id。你可以使用var pageContent=$('<div class="addId" id="test">').append(trimmedCont); 或pageContent.get(0).id = "test"

【讨论】：