gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:49:05 25 4
gpt4 key购买 nike

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

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

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

编辑:

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

编辑2:

附加图片以帮助阐明意图

enter image description here

最佳答案

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

关于javascript - 检测无序列表中的换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33135826/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com