jquery的附加和前置问题答案

【问题标题】：Trouble with jquery's append and prependjquery的附加和前置问题
【发布时间】：2011-09-29 05:35:15
【问题描述】：

我使用以下代码来检查某个 div 是否存在。如果没有，它会将其添加到 dom 的适当位置。

if (!($("#col"+lastSlide).length))
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}

我的问题是，当这个 if 语句再次检查一个已经被附加/前置的 div 时，它看不到我添加的 div。所以它会继续添加已经前置/附加的 div。

有什么办法可以解决这个问题？

更多代码：

//fillin added column
function fillElement(colnum)
{
    var URL = 'schedule.php';
    $("#col"+colnum).text("Loading...").show();
    $.post(URL,{fecolnum: colnum}, 
    function (data)
    {
        $("#col"+colnum).html(data).show();
    });
}
//...irrelevant code...

    // Create event listeners for .arrows clicks
      $('.arrows')
        .bind('click', function(){
            numberOfSlides++;
            // Determine new position
            if ($(this).attr('id')=='arrow_right')
            {
                lastSlide++;
                currentPosition++;
                if (!($("#col"+lastSlide).length))
                {
                    $('#schDisplay').append('<div id="col' + lastSlide + '" class="schColumn" style="float: left; width: ' +slideWidth+ 'px"></div>');
                    fillElement(lastSlide);
                }
            }
            else
            {
                lastSlide--;
                currentPosition--;
                if (!($("#col"+lastSlide-2).length))
                {
                    $('#schDisplay').prepend('<div id="col' + (lastSlide-2) + '" class="schColumn" style="float: left; width: ' +slideWidth+ 'px"></div>');
                    fillElement(lastSlide-2);
                }
            }

【问题讨论】：

您需要显示更多上下文。我无法从您的问题中看出 '#col'+lastSlide 和 '#schDisplay' 是如何相关的。根据您向我展示的内容，当您添加到 #schDisplay 时，'#col'+lastSlide 完全有可能不会改变。
信息不足。请贴出相关代码。
我更新了问题并添加了更多代码。我觉得我可能需要在某处使用 .live()，但我不确定正确的语法在哪里或是什么。
您说它不断添加 div，但您从不检查相同的 div id 两次。每次单击 .arrows 链接时都会增加 lastSlide，因此它每次都会添加一个具有新 id 的新 div。
它在按下第一个按钮时增加 lastSlide 并在按下第二个按钮时减少 lastSlide。当我递增然后递减时会出现问题，反之亦然。发生这种情况时会添加具有完全相同 ID 的 div。（我是通过萤火虫看到的）

标签： javascript jquery dom append prepend

【解决方案1】：

这将起作用：

if (!($("#col"+lastSlide).length)) {
  var newdiv = $('<div id="col'+lastSlide+'"/>');
  $('#schDisplay').prepend(newdiv);
}

【讨论】：

【解决方案2】：

它不断添加，因为您的 if 条件始终为真。

不过我还没有测试过...

你能试试这样的方法看看是否有帮助吗？

var len = 0;
len = $("#col"+lastSlide).length;
if (len < 1)
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}

【讨论】：

【解决方案3】：

如果我正确理解您的问题，您是说如果您再次执行相同操作，它会继续添加 div。但是，我无法重现这一点。以下代码显示了一个 div。根据你的说法，它会显示两个 div。

lastSlide = 1;
if (!($("#col"+lastSlide).length))
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}
if (!($("#col"+lastSlide).length))
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}

如果我没有遗漏什么，那么您的问题一定出在其他地方。

【讨论】：

【解决方案4】：

我没有太多的背景信息，但是看看这个jsfiddle我是根据你给我的东西制作的。

请注意我发表评论的那一行，您可以评论 out 增量语句。基本上，这是您可以测试“lastSlide”为相同值时发生的情况的方法。（如果“lastSlide”确实是一个不同的值）。

您可以尝试调试您的实际代码并确保 lastSlide 具有您实际期望的值。

【讨论】：

【解决方案5】：

您可以使用 jQuery 过滤器来删除选定的 div，如果它已经被预先添加到。这应该适用于您的特定场景：

$('#schDisplay').filter(':not(:has(div[id^=col]))')

这表示“选择 id 为 'schDisplay' 的 div，如果它有任何 id 以 'col' 开头的后代 div，则将其从选择中删除”。

在您的示例中，您可以像这样将 prepend 语句链接到此代码（不需要 if 语句）：

$('#schDisplay').filter(':not(:has(div[id^=col]))').prepend('<div id="col' + (lastSlide) + '"></div>');

特别注意：我相信 :has 选择器是一个 jQuery 内容过滤器选择器，这意味着没有 jQuery 它将无法工作。您显然在使用 jQuery，但有不同实现的读者应该牢记这一点。

【讨论】：