Блог

Я хотел бы динамически стилизовать каждый первый и последний элемент в строке с помощью css или js.

 lt;div class"box"gt; lt;uigt; lt;li class"one"gt;lt;/ligt;  lt;li class"two"gt;lt;/ligt; First lt;li class"two"gt;lt;/ligt; lt;li class"two"gt;lt;/ligt; lt;li class"two"gt;lt;/ligt; Last lt;li class"one"gt;lt;/ligt; First lt;li class"one"gt;lt;/ligt; lt;li class"one"gt;lt;/ligt; lt;li class"one"gt;lt;/ligt; lt;li class"one"gt;lt;/ligt; lt;li class"one"gt;lt;/ligt; lt;li class"one"gt;lt;/ligt; lt;li class"one"gt;lt;/ligt; Last lt;li class"two"gt;lt;/ligt; First lt;li class"two"gt;lt;/ligt; lt;li class"two"gt;lt;/ligt; lt;li class"two"gt;lt;/ligt; lt;li class"two"gt;lt;/ligt; lt;li class"two"gt;lt;/ligt; Last lt;/uigt;  

.два:последний дочерний элемент выбирает только один и последний элемент в пользовательском интерфейсе, вместо нескольких в необработанной той же проблеме с .два:последний тип

Вот решение с кодом.

 lt;!DOCTYPE HTMLgt; lt;HTMLgt; lt;headgt; lt;titlegt;Try jQuery Onlinelt;/titlegt; lt;script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"gt;lt;/scriptgt;  lt;script type="text/javascript"gt; $( 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;");  } });  }); lt;/scriptgt; lt;stylegt;  lt;/stylegt; lt;/headgt; lt;bodygt; lt;UIgt; lt;li class="one"gt;testlt;/ligt; lt;li class="two"gt;Firstlt;/ligt; lt;li class="two"gt;testlt;/ligt; lt;li class="two"gt;testlt;/ligt; lt;li class="two"gt;Lastlt;/ligt; lt;li class="one"gt;Firstlt;/ligt; lt;li class="one"gt;testlt;/ligt; lt;li class="one"gt;testlt;/ligt; lt;li class="one"gt;testlt;/ligt; lt;li class="one"gt;testlt;/ligt; lt;li class="one"gt;testlt;/ligt; lt;li class="one"gt;testlt;/ligt; lt;li class="one"gt;Lastlt;/ligt; lt;li class="two"gt;Firstlt;/ligt; lt;li class="two"gt;testlt;/ligt; lt;li class="two"gt;testlt;/ligt; lt;li class="two"gt;testlt;/ligt; lt;li class="two"gt;testlt;/ligt; lt;li class="two"gt;Lastlt;/ligt; lt;/uigt;  

Вот способ, которым вы могли бы попробовать:

 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; } 

 lt;div class="box"gt;  lt;ul id="bigList"gt;  lt;li class="one"gt;1lt;/ligt;   lt;li class="two"gt;2lt;/ligt; lt;!--First--gt;  lt;li class="two"gt;2lt;/ligt;  lt;li class="two"gt;2lt;/ligt;  lt;li class="two"gt;2lt;/ligt; lt;!--Last--gt;  lt;li class="one"gt;1lt;/ligt; lt;!--First--gt;  lt;li class="one"gt;1lt;/ligt;  lt;li class="one"gt;1lt;/ligt;  lt;li class="one"gt;1lt;/ligt;  lt;li class="one"gt;1lt;/ligt;  lt;li class="one"gt;1lt;/ligt;  lt;li class="one"gt;1lt;/ligt;  lt;li class="one"gt;1lt;/ligt; lt;!--Last--gt;  lt;li class="two"gt;2lt;/ligt; lt;!--First--gt;  lt;li class="two"gt;2lt;/ligt;  lt;li class="two"gt;2lt;/ligt;  lt;li class="two"gt;2lt;/ligt;  lt;li class="two"gt;2lt;/ligt;  lt;li class="two"gt;2lt;/ligt; lt;!--Last--gt;  lt;/ulgt;  lt;/divgt;