Select items in a sequence (by group class name)

Question

How to select elements created by dynamic elements by groups? I want to select msgpvtstyleme and work on them. Then select msgpvtstyle again and work on them ... The goal is to get grouped elements and insert them into classes .....

I want to pretend chats with tea

the result is final! Thanks everyone!

Answer 1

Here is a basic jQuery script that checks each element and detects the following:

• Check current class
• If the previous brother has a different class, he will get first
• If the next brother is the same class, he will be middle
• If the next brother belongs to another class, he will be marked as last
• If the previous and next siblings belong to other classes, this will be first middle last

 // define your container here var container = $('.container'), currentClass = container.children(":first").attr("class"); // run through each child container.children('li').each(function() { currentClass = $(this).attr("class"); if ( $(this).prev().attr("class") !== currentClass ) { $(this).attr("data-order","first"); } if ( $(this).next().attr("class") === currentClass && $(this).prev().attr("class") === currentClass ) { $(this).attr("data-order","middle"); } if ( $(this).next().attr("class") !== currentClass ) { $(this).attr("data-order","last"); } if ( $(this).next().attr("class") !== currentClass && $(this).prev().attr("class") !== currentClass ) { $(this).attr("data-order","first middle last"); } // debugging only $(this).text( $(this).attr("class") + ': ' + $(this).attr('data-order') ); }); 

 li[data-order~="first"] {font-weight: bold;} li[data-order~="last"] {border-bottom:1px solid;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="container"> <li class="class1"></li> <li class="class1"></li> <li class="class1"></li> <li class="class2"></li> <li class="class2"></li> <li class="class1"></li> </ul> 

jsFiddle: https://jsfiddle.net/azizn/40trqhn4/

Note: I used the data-order attribute instead, since changing the class name will break the validation function (since it all revolves around the class name). You can access elements using CSS attribute selectors [data-order="first"] , for example.

Answer 2

Here is an easy way:

 function style_latest_messages() { var classes = '.msgpvtstyle, .msgpvtstyleme'; $(classes).filter('.first,.middle,.last') .last().removeClass('first middle last') .add($(classes).not('.first,.middle,.last')).each(function() { styleMessage(this); }); function styleMessage(el) { var prev = $(el).prevAll(classes).eq(0), next = $(el).nextAll(classes).eq(0), is_first = is_me(prev) != is_me(el) || !prev.length, is_last = is_me(next) != is_me(el) || !next.length; if(is_first) $(el).addClass('first'); if(is_last) $(el).addClass('last'); if(is_first == is_last) $(el).addClass('middle'); } } function is_me(el) { return $(el).hasClass('msgpvtstyleme'); } 

Please note that $(this).prevAll(classes).eq(0) and $(this).nextAll(classes).eq(0) will allow you to ignore any additional element, such as time. Try the demo to see what I mean.

Demo

 style_latest_messages(); function style_latest_messages() { var classes = '.msgpvtstyle, .msgpvtstyleme'; $(classes).filter('.first,.middle,.last') .last().removeClass('first middle last') .add($(classes).not('.first,.middle,.last')).each(function() { styleMessage(this); }); function styleMessage(el) { var prev = $(el).prevAll(classes).eq(0), next = $(el).nextAll(classes).eq(0), is_first = is_me(prev) != is_me(el) || !prev.length, is_last = is_me(next) != is_me(el) || !next.length; if(is_first) $(el).addClass('first'); if(is_last) $(el).addClass('last'); if(is_first == is_last) $(el).addClass('middle'); } } function is_me(el) { return $(el).hasClass('msgpvtstyleme'); } // Just for testing var msgs=['<li class="time">17:52</li><li class="msgpvtstyleme">Don\'t forget to unload the dishwasher</li>', '<li class="msgpvtstyleme">Did you finish your homework?</li>', '<li class="msgpvtstyleme">Your grandmother is coming for dinner.</li>', '<li class="msgpvtstyleme">Dad and I decided to buy you a car.</li>', '<li class="time">17:56</li><li class="msgpvtstyle">Did U? OMG thank U!</li>', '<li class="msgpvtstyleme">No I was just making sure you get my texts.</li>', '<li class="msgpvtstyle">That was cruel</li>']; (function add_msg(){if(!msgs.length)return;$('.messagepvt').append(msgs.shift());style_latest_messages();setTimeout(add_msg,(msgs[0] || "").length * 50)})(); 

 .messagepvt{ position: absolute; top: 0; left: 50%; height: 100%; overflow: hidden; margin-left: -35%; list-style: none; font-family: Arial, Helvetica, sans-serif; width: 70%; margin-top: 0; background: #f5f5f5; padding: .5em }body{ overflow: hidden }.messagepvt:after{ content: ""; display: block; clear: both }.time{ text-align: center; clear: both; color: #888; font-size: 10px; margin: .5em }.msgpvtstyle, .msgpvtstyleme { padding: .3em .8em; float: left; clear: both; background: #e6e6ec; color: #000; margin: 1px; font-size: 12px; -webkit-transition: border-radius .25s ease; -moz-transition: border-radius .25s ease; -webkit-animation: deploy .15s ease; -moz-animation: deploy .15s ease; -webkit-transform-origin: top left; -moz-transform-origin: top left }.msgpvtstyle.first { border-radius: 1.5em 1.5em 1.5em .5em }.msgpvtstyle.middle { border-radius: .5em 1.5em 1.5em .5em }.msgpvtstyle.last { border-radius: .5em 1.5em 1.5em 1.5em }.msgpvtstyle.first.middle.last, .msgpvtstyleme.first.middle.last { border-radius: 1.5em 1.5em 1.5em 1.5em }.msgpvtstyleme { float: right; background: #49f; color: #fff; -webkit-transform-origin: top right; -moz-transform-origin: top right}.msgpvtstyleme.first { border-radius: 1.5em 1.5em .5em 1.5em }.msgpvtstyleme.middle { border-radius: 1.5em .5em .5em 1.5em }.msgpvtstyleme.last { border-radius: 1.5em .5em 1.5em 1.5em }@-webkit-keyframes deploy{ from{-webkit-transform: scale(0)}to{-webkit-transform: scale(1)} }@-moz-keyframes deploy{ from{-moz-transform: scale(0)}to{-moz-transform: scale(1)} } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="messagepvt"></ul> 

Answer 3

Try this code to add classes to existing html tags

 $('.msgpvtstyle ').each(function() { $('.msgpvtstyleme:first-child' , $(this)).addClass('first'); $('.msgpvtstyleme:last-child' , $(this)).addClass('last'); $('.msgpvtstyleme:not(:first-child):not(:last-child)' , $(this)).addClass('middle'); });