select elements in sequence (by group class name)

Question

how do I select elements created dinamicamentes by groups? I want to select msgpvtstyleme and work on them. Then select msgpvtstyle again and work on them ... Goal is to get grouped elements and insert them classes .....

I want to simulate chat balloons

result final! Thank you all!

Answer 1

Here is a basic jQuery script which checks each element and detecting the following:

• Check current class
• If previous sibling has a different class then it will get first
• If next sibling is of the same class, it will be middle
• If next sibling is of another class, it will be marked as last
• If previous and next siblings are of other classes, it 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 data-order attribute instead class as altering the class name will break the checking function (since it all revolves around class name). You can access the elements through the CSS attribute selectors [data-order="first"] for example.

Answer 2

Here is a simple 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'); }

Note that $(this).prevAll(classes).eq(0) and $(this).nextAll(classes).eq(0) will allow you to ignore any extra 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 in 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');
});