javascript - 检测无序列表中的换行符

Question

关于使用 :before 或 :after 在列表项之间插入分隔符的水平无序列表。

我已经按照预定的时间间隔抽查列表的子项是否已插入另一行，并且在某种程度上感到满意，至少列表看起来正确在我的调整点。

然而，这是一个短视的解决方案，因为每当我的客户想要更改任何给定子项的内容时，就会出现问题。相当乏味的工作:\当决定切换到不同的分隔符时，问题变得更加复杂，因为包含这些列表之一的每个页面都嵌入了也需要更改的自定义 CSS。长话短说，我几乎放弃了保持干净的努力。

编辑:

需要明确的是，问题是CSS(据我所知)没有明确的方法来检测列表中的换行符。如果您在列表项之间插入分隔线，并且列表分成一个新行，则第一行的最后一个元素会在末尾挂出一个分隔线。难看。我之前能够解决这个问题的唯一其他方法是使用 CSS 中的调整点，但这并不是一个理想的解决方案，因为如果列表发生任何变化，您必须返回并重新检查调整点。

编辑2:

附加图片以帮助阐明意图

Answer 1

我今天提出了一个我非常满意的解决方案，所以我想为了后代而分享它，以防其他人也遇到类似的问题。我也对其他人可能提出的解决方案非常感兴趣，特别是如果解决方案仅使用 CSS。

CSS:

.classname {
    padding-left:0;
}
.classname.centered {
    text-align:center;
}
.classname.left {
    text-align:left;
}
.classname li {
    display:inline;
    margin:0;
    padding:0;
    white-space: nowrap;    
}
.classname li:not(.last-on-line):not(:last-of-type):after {
    content:"|";
    margin:0 0.25em 0 0.45em;
}

.classname.centered li:first-of-type,
.classname.centered li.first-on-line {
    padding-left:0.8875em;
}

.classname.centered li:last-of-type,
.classname.centered li.last-on-line,
.classname.left li:last-of-type,
.classname.left li.last-on-line {
    padding-right:0.8875em;
}

JS:

function determineListLineBreak() {
    //..
    var matchingDisplayTypes = ['inline','inline-block'];
    //..
    $('ul').each(function() {
        //..
        var listParent = this;
        //..
        if ($(this).hasClass('classname') == true && $(this).find('li').length > 1) {
            //..
            if ($.inArray($(this).find('li').css('display'), matchingDisplayTypes) > -1) {
                //..
                var listItems = $(this).find('li'),
                    listItemCount = $(this).find('li').length,
                    listItemLoopCount = 0;
                //..
                $(listItems).each(function() {
                    //..
                    listItemLoopCount = listItemLoopCount + 1;
                    //..
                    $(this).removeClass('first-on-line').removeClass('last-on-line');
                    //..
                    if (listItemLoopCount == listItemCount) {
                        //..
                        $(listItems).each(function() {
                            //..                    
                            var listItem = this;
                            //..
                            var itemToCompare,
                                compareDirection;
                            //..
                            if ($(listItem).next().length) {                        
                                itemToCompare = $(listItem).next(),
                                compareDirection = 'next';
                            }
                            else {
                                itemToCompare = $(listItem).prev(),
                                compareDirection = 'prev';
                            }
                            //..
                            if ($(listItem).offset().top != $(itemToCompare).offset().top) {
                                //..
                                if (compareDirection == 'next') {
                                    $(listItem).addClass('last-on-line');
                                    $(itemToCompare).addClass('first-on-line');
                                }
                                else {
                                    $(listItem).addClass('first-on-line');
                                    $(itemToCompare).addClass('last-on-line');
                                }
                            }
                        });
                    }
                });
            }
        }
    });
}

$(document).ready(function() {
    determineListLineBreak();
});

$(window).resize(function() {
    setTimeout(determineListLineBreak, 0)
});

HTML:

<ul class="classname left">
    <li>This is a list item</li>
    <li>This is another list item</li>
    <li>An item?</li>
    <li>Yes.</li>
    <li>Are we done?</li>
    <li>This is getting boring</li>
</ul>
<ul class="classname centered">
    <li>This is a list item</li>
    <li>This is another list item</li>
    <li>An item?</li>
    <li>Yes.</li>
    <li>Are we done?</li>
    <li>This is getting boring</li>
</ul>

对有需要的人的说明:

我所做的只是测量每个列表项到页面顶部的距离，然后比较列表项和紧邻其前面的列表项的测量值。如果距离不同，它会在换行符之前向列表项添加一个类(对于那些可能需要的人，我还向开始新行的列表项添加了一个类)。 CSS 负责剩下的事情。

感谢您的阅读，希望对您有所帮助!

编辑:

所以我发现，当你接近打破界限时，你有时会看到边缘的元素同时具有两个类别，而不应再排在最后的元素也具有“最后一个类别”。我认为这与分隔线占用的空间“消失”有关，从而允许本应进入下一行的空间“向上”返回。

我现在采用的解决方法似乎有点多。我觉得这应该更容易，但我只是想念它。第一次检查时我没有给予足够的关注(调整大小不够慢)，但现在添加的 JS/CSS 似乎使它近乎完美。如果我真的尝试的话，我仍然可以打破它，所以我可以使用一些帮助，或者如果有人有更好的解决方案，我将不胜感激。

编辑2:

所以，事实证明这也可以被打破，我必须继续努力。如果你不是 super 挑剔的话，这会让你接近。目前对我来说已经足够了

编辑3:

我对代码进行了更多编辑，以修复一些问题并包括左对齐方向。

fiddle http://jsfiddle.net/u5uzg02w/