css多个第一个和最后一个动态
Posted
技术标签:
【中文标题】css多个第一个和最后一个动态【英文标题】：css multiple first and last dynamic 【发布时间】：2022-01-09 08:51:53 【问题描述】：我想通过 css 或 js 为行中的每个第一个和最后一个元素动态设置样式。
<div class"box">
<ui>
<li class"one"></li>
<li class"two"></li> First
<li class"two"></li>
<li class"two"></li>
<li class"two"></li> Last
<li class"one"></li> First
<li class"one"></li>
<li class"one"></li>
<li class"one"></li>
<li class"one"></li>
<li class"one"></li>
<li class"one"></li>
<li class"one"></li> Last
<li class"two"></li> First
<li class"two"></li>
<li class"two"></li>
<li class"two"></li>
<li class"two"></li>
<li class"two"></li> Last
</ui>
.two:last-child 在 ui 中仅选择一个也是最后一个元素，而不是在 .two:last-of-type 的原始相同问题中选择多个
【问题讨论】：
【参考方案1】：这里是代码的解决方案。
<!DOCTYPE html>
<HTML>
<head>
<title>Try jQuery Online</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function()
var cls="one";
var len = $('ui li').length;
$("ui li").each(function(index)
if(cls!=$(this).attr("class"))
$(this).attr("style","background-color:red;");
if(index!=1)
$(this).prev().attr("style","background-color:red;");
cls=$(this).attr("class");
if(index === (len - 1))
$(this).attr("style","background-color:red;");
);
);
</script>
<style>
</style>
</head>
<body>
<UI>
<li class="one">test</li>
<li class="two">First</li>
<li class="two">test</li>
<li class="two">test</li>
<li class="two">Last</li>
<li class="one">First</li>
<li class="one">test</li>
<li class="one">test</li>
<li class="one">test</li>
<li class="one">test</li>
<li class="one">test</li>
<li class="one">test</li>
<li class="one">Last</li>
<li class="two">First</li>
<li class="two">test</li>
<li class="two">test</li>
<li class="two">test</li>
<li class="two">test</li>
<li class="two">Last</li>
</ui>
【讨论】：
【参考方案2】：您可以尝试以下方法：
var oneList = document.getElementById("bigList").querySelectorAll(".one");
oneList.forEach(function (item)
if (item.nextElementSibling)
var nextSibling = item.nextElementSibling;
if (nextSibling.classList.contains("two"))
item.classList.add("bg-green");
);
var twoList = document.getElementById("bigList").querySelectorAll(".two");
twoList.forEach(function (item)
if (item.nextElementSibling)
var nextSibling = item.nextElementSibling;
if (nextSibling.classList.contains("one"))
item.classList.add("bg-green");
);/* First */
.one + .two, .two + .one
background-color: red;
/* Last */
.bg-green, #bigList li:last-child
background-color: green;
/* No style on first child */
#bigList li:first-child
background-color: transparent;
<div class="box">
<ul id="bigList">
<li class="one">1</li>
<li class="two">2</li> <!--First-->
<li class="two">2</li>
<li class="two">2</li>
<li class="two">2</li> <!--Last-->
<li class="one">1</li> <!--First-->
<li class="one">1</li>
<li class="one">1</li>
<li class="one">1</li>
<li class="one">1</li>
<li class="one">1</li>
<li class="one">1</li>
<li class="one">1</li> <!--Last-->
<li class="two">2</li> <!--First-->
<li class="two">2</li>
<li class="two">2</li>
<li class="two">2</li>
<li class="two">2</li>
<li class="two">2</li> <!--Last-->
</ul>
</div>【讨论】：
@Kinglish 不错，我已经对其进行了编辑以解决该问题。以上是关于css多个第一个和最后一个动态的主要内容，如果未能解决你的问题，请参考以下文章