当换行到新字符串时，使用jQuery删除分隔符时出现问题

我使用一个简单的脚本来删除分隔符，但有时它不会被删除。有人能帮我完成这个剧本吗？

function sep() {
var lastElement = false;
$("ul li").each(function() {
if (lastElement && lastElement.offset().left > $(this).offset().left) {
$(lastElement).addClass("lastdot");
$(this).addClass("firstdot");
} else if (lastElement) {
$(lastElement).removeClass("lastdot");
$(this).removeClass("firstdot");
}
lastElement = $(this);
});
}

a {color:royalblue; text-decoration:none;}
a:hover, a:active {text-decoration:underline;}
ul {background-color:lightblue; color: black; text-align:center; padding:1em 0; margin:0;}
ul li {display:inline; white-space:nowrap;}
ul li::before {content:""; padding-right:3px;}
ul li::after {content:"*"; padding-left:3px;}
ul li.firstdot::before, ul li:first-child::before {content:"*"; color:transparent;}
ul li.lastdot::after,  ul li:last-child::after {color:transparent;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body onload="sep();" onresize="sep();">
<ul >
<li>Red</li>
<li>Green</li>
<li>Orange</li>
<li>White</li>
<li>Black</li>
<li>Yellow</li>
<li>Light Blue</li>
<li>Magenta</li>
<li>Dark Cyan</li>
</ul>

解决方案：ul｛font-size:0｝li｛font-size：16px｝

a {color:royalblue; text-decoration:none;}
a:hover, a:active {text-decoration:underline;}
ul {font-size: 0;background-color:lightblue; color: black; text-align:center; padding:1em 0; margin:0;}
ul li {font-size: 16px;display:inline; white-space:nowrap;}
ul li::before {content:""; padding-right:3px;}
ul li::after {content:"*"; padding-left:3px;}
ul li.firstdot::before, ul li:first-child::before {content:"*"; color:transparent;}
ul li.lastdot::after,  ul li:last-child::after {color:transparent;}

<ul >
<li>Red</li>
<li>Green</li>
<li>Orange</li>
<li>White</li>
<li>Black</li>
<li>Yellow</li>
<li>Light Blue</li>
<li>Magenta</li>
<li>Dark Cyan</li>
</ul>

相关内容

最新更新

热门标签：