jquery 的追加和前置问题

Question

我使用以下代码来检查某个 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);
                }
            }

Answer 1

我没有太多背景信息，但请查看我根据您给我的内容制作的 jsfiddle 。

请注意我做了注释的行，您可以注释掉增量语句。基本上，这就是测试当“lastSlide”为相同值时会发生什么情况的方法。 （相对于“lastSlide”确实是一个不同的值）。

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

Answer 2

如果我正确理解你的问题，你的意思是，如果你再次做同样的事情，它会不断添加 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>');
}

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

Answer 3

这将起作用：

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

Answer 4

它不断增加，因为你的 if 条件始终为真。

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

你能尝试这样的事情看看是否有帮助？

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

Answer 5

您可以使用 jQuery 过滤器删除选定的 div（如果它已添加到前面）。这应该适用于您的特定场景：

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

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

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

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

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