Javascript 访问新创建的DOM元素以进行循环_Javascript_Jquery

Javascript 访问新创建的DOM元素以进行循环

javascript jquery

Javascript 访问新创建的DOM元素以进行循环,javascript,jquery,Javascript,Jquery,我使用jQuerySortable+jQueryDragable组合一个页面，在幻灯片中添加和删除图像。我现在已经设置好了，这样我就可以拖入新的屏幕并将它们放到我想要的命名序列中，它将创建我需要的DOM元素我正在成功地扫描页面以查找必要的元素并将它们提交到一个数组中，但它从未拾取新添加的项。因此，例如，我有以下元素开始： <h3 data-sequence-title="sequence1">Sequence 1</h3> <ul class="sortable

我使用jQuerySortable+jQueryDragable组合一个页面，在幻灯片中添加和删除图像。我现在已经设置好了，这样我就可以拖入新的屏幕并将它们放到我想要的命名序列中，它将创建我需要的DOM元素

我正在成功地扫描页面以查找必要的元素并将它们提交到一个数组中，但它从未拾取新添加的项。因此，例如，我有以下元素开始：

<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
    <li data-screen="screen1">Screen 1</li>
    <li data-screen="screen2">Screen 2</li>
    <li data-screen="screen3">Screen 3</li>
</ul>

添加新LIs的代码：

// Initialize draggable / droppable functionality
$('.sortable').sortable({
    placeholder: 'ui-state-highlight',
    revert: true
});
$('.draggable li').draggable({
    connectToSortable: '.sortable',
    helper: 'clone',
    revert: 'invalid'
});
$('.sortable').disableSelection();

我需要返回修改后的DOM，而不是加载页面时的元素。

我根据您的代码做了一个快速实验。我可以从下面拖动元素并将它们添加到第一个序列中。然后，单击clicky按钮即可访问它们

  <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="moo">clicky</div>

<ul class="sortable connectedSortable ui-sortable">
    <h3 data-sequence-title="sequence1">Sequence 1</h3>
    <li data-screen="s1screen1">Seq 1 Screen 1</li>
    <li data-screen="s1screen2">Seq 1 Screen 2</li>
    <li data-screen="s1screen3">Seq 1 Screen 3</li>
</ul>



<ul class="draggable">
    <h3 data-sequence-title="sequence2">Dragable Sequence (Drag these elements up and assign to sequence 1)</h3>
    <li data-screen="s2screen1">Seq 2 Screen 1</li>
    <li data-screen="s2screen2">Seq 2 Screen 2</li>
    <li data-screen="s2screen3">Seq 2 Screen 3</li>
</ul>


<script>
$(document.getElementById('moo')).on('click', function(){

    // Build nested array from DOM elements
    var jsonObj = [];    

    $('.sortable h3').each(function(){
        var obj = {
            title: $(this).data("sequence-title"),
            Screens: []
        };

        $(this).siblings("li").each(function() {
          obj.Screens.push({
              image: $(this).data("screen")
          });
        });

        jsonObj.push(obj);
    });

    alert(JSON.stringify(jsonObj));
});

// Initialize draggable / droppable functionality
$('.sortable').sortable({
    placeholder: 'ui-state-highlight',
    revert: true
});
$('.draggable li').draggable({
    connectToSortable: '.sortable',
    helper: 'clone',
    revert: 'invalid'
});
$('.sortable').disableSelection();

</script>

</body>
</html>


clicky

序列1
序号1屏幕1
序号1第2屏
序号1第3屏


可拖动序列（向上拖动这些元素并指定给序列1）
序号2第1屏
序号2第2屏
序号2第3屏

$（document.getElementById（'moo'））。on（'click'，function（）{
//从DOM元素构建嵌套数组
var jsonObj=[]；
$（'.sortable h3'）。每个（函数（）{
var obj={
标题：$（this）.data（“序列标题”），
屏幕：[]
};
$（this）.同级（“li”）.each（function（）{
推({
图像：$（此）.data（“屏幕”）
});
});
推送（obj）；
});
警报（JSON.stringify（jsonObj））；
});
//初始化可拖动/可拖放功能
$（'.sortable'）。可排序({
占位符：“ui状态突出显示”，
回复：真
});
$（'.draggable li'）。draggable({
connectToSortable:“.sortable”，
助手：“克隆”，
回复：“无效”
});
$（'.sortable'）.disableSelection（）；

将元素添加到排序表后，必须更新组件：

$(".sortable").sortable("refresh");

您的标记无效，您不能将

作为

的直接子元素。是的，但不是这里的问题。您能给我们生成新ul元素的代码吗？当然，更新了原始元素。还将H3s移到ULs之外。@Adam Nelson根据您的代码，我做了一个快速示例。该代码允许将元素从单独的节拖动到新的节中。单击按钮，显示JSON已适当更新。

  <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="moo">clicky</div>

<ul class="sortable connectedSortable ui-sortable">
    <h3 data-sequence-title="sequence1">Sequence 1</h3>
    <li data-screen="s1screen1">Seq 1 Screen 1</li>
    <li data-screen="s1screen2">Seq 1 Screen 2</li>
    <li data-screen="s1screen3">Seq 1 Screen 3</li>
</ul>



<ul class="draggable">
    <h3 data-sequence-title="sequence2">Dragable Sequence (Drag these elements up and assign to sequence 1)</h3>
    <li data-screen="s2screen1">Seq 2 Screen 1</li>
    <li data-screen="s2screen2">Seq 2 Screen 2</li>
    <li data-screen="s2screen3">Seq 2 Screen 3</li>
</ul>


<script>
$(document.getElementById('moo')).on('click', function(){

    // Build nested array from DOM elements
    var jsonObj = [];    

    $('.sortable h3').each(function(){
        var obj = {
            title: $(this).data("sequence-title"),
            Screens: []
        };

        $(this).siblings("li").each(function() {
          obj.Screens.push({
              image: $(this).data("screen")
          });
        });

        jsonObj.push(obj);
    });

    alert(JSON.stringify(jsonObj));
});

// Initialize draggable / droppable functionality
$('.sortable').sortable({
    placeholder: 'ui-state-highlight',
    revert: true
});
$('.draggable li').draggable({
    connectToSortable: '.sortable',
    helper: 'clone',
    revert: 'invalid'
});
$('.sortable').disableSelection();

</script>

</body>
</html>

$(".sortable").sortable("refresh");