Question

所以，我在这个问题上已经四处走动，我所能得到的只是这是jquery中的一个固有缺陷，但我在这里发布这个问题作为最后的手段。

这是项目的1,000英尺视图。我正在制作类似于新Google图片搜索结果的幻灯片功能。我有一个盒子网格，一些扩展为更深层内容，一些不扩展。我实现这个的方法是运行下面的javascript来动态地在每行具有可扩展内容的网格框下面添加“行”div。

function defineFocusRowLength() {
    var rowFocusBoxCount = 0;
    $('#isofocus .focusbox.core').each(function(){
        rowFocusBoxCount++;
        if($(this).css('float') === 'right') {
            finalFocusRowBoxCount = rowFocusBoxCount;
            return false;
        }
    });
    $('#isofocus .slidecontent').remove();
    $('#isofocus .focusbox.core:nth-child('+finalFocusRowBoxCount+'n)').after('<div class="slidecontent"><div class="wrap"></div></div>');
    if($('#isofocus .focusbox.core').last().css('float') === 'right') {
        // do nothing because it should have been caught by the previous line
    } else {
        $('#isofocus .focusbox.core').last().next('.focusbox').each(function(){
            if($(this).css('float') === 'right') {
                if($(this).next('.focusbox').css('float') === 'right') {
                    $(this).next('.focusbox').after('<div class="slidecontent"><div class="wrap"></div></div>');
                } else {
                    $(this).after('<div class="slidecontent"><div class="wrap"></div></div>');
                }
            }
        });
    }
}
defineFocusRowLength();

$(window).resize(function() {
    defineFocusRowLength();
});

如果您想知道，我也在window.resize上调用此函数，因为我的网站是响应式的，因此网格重新组织此函数会删除旧的展开行并在适当的空格中创建新的行。

我的代码的这一部分都很精彩。没有任何问题。但是，当我尝试使用完全失败的.next（）来定位这些新的div时。

以下是我在每个框中单击时执行的代码：

$(".focusbox a.popup").click(function(){
    var expandtext = $(this).parents('.focusbox').children('.expanded-content').html();
    $(this).parents('.focusbox').next('.slidecontent').html(expandtext);
    $(this).parents('.focusbox').next('.slidecontent').slideToggle();
})

现在，我已尝试过此代码的其他20种变体，但它们都有效。只是这种特殊的方式我需要它才能工作失败。以下是我使用的一些变化，但不是正确的结果：

$(this).parents('.focusbox').next().slideToggle(); //works, but slides up the next box, not the expanded row
$(this).parents('.focusbox').siblings('.slidecontent').slideToggle(); //works but shows all expanded rows
$(this).parents('#isofocus').find('.slidecontent').slideToggle(); //works but shows all expanded rows

所以是的，我非常关注我的智慧，并认为这只是jquery中的一个缺陷，即.next（）函数无法访问页面加载后生成的内容选择器，即使在页面加载之后才会调用该函数。

这是我的jsfiddle，你可以捅它： http://jsfiddle.net/RCVfK/1/

使用jquery .next（）与javascript生成的内容选择器不起作用

0 个答案: