Question

如何按群组选择创建dinamicamentes的元素？我想选择msgpvtstyleme并对其进行处理。然后再次选择msgpvtstyle并对其进行处理......目标是获取分组元素并插入类......

我想模拟聊天气球

结果最后！谢谢大家！

Answer 1

这是一个基本的jQuery脚本，它检查每个元素并检测以下内容：

检查当前class
如果以前的兄弟姐妹有不同的班级，那么它将获得first
如果下一个兄弟是同一个班级，那么它将是middle
如果下一个兄弟是另一个班级，则会将其标记为last
如果上一个和下一个兄弟姐妹属于其他班级，则为first middle last

＆＃13;

// 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') );
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

注意：我使用data-order属性而不是类，因为更改类名会破坏检查功能（因为它都围绕类名）。例如，您可以通过CSS属性选择器[data-order="first"]访问元素。

Answer 2

这是一个简单的方法：

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

请注意，$(this).prevAll(classes).eq(0)和$(this).nextAll(classes).eq(0)将允许您忽略任何额外元素，例如时间。试试看看我的意思。

演示

＆＃13;

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

＆＃13;

.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)} }

＆＃13;

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

＆＃13;

Answer 3

尝试使用此代码在现有的html标记中添加类

$('.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');
});

按顺序选择元素（按组类名称）

3 个答案:

演示