Question

我一直在寻找这个时间，我真的很接近。

这是一个虚拟版本，因为我的代码很长。 li标签中没有模式。我想要的是用“left”类包装所有li标签，除了最后一个孩子。最后一个孩子，我想让课程“正确”。

我在wordpress中使用重力形式，所有输入都包含在一个ul中。让我说我在输入字段中添加了10个不同的类别。通常使用每个函数来包装博客布局中的li标签，但在这里我必须将div添加到包装的li标签中。

:)

// jQuery
(function($) {
  // Wrap private
  $('ul.now .private').wrapAll('<div class="service" />');  
  // Wrap business
  $('ul.now .business').wrapAll('<div class="service" />');
  // Wrap other
  $('ul.now .other').wrapAll('<div class="service" />');


  // Wrap each options
   $('ul.now .service li:not(:last-child)').each(function() {
     $(this).wrapAll('<div class="left" />')
   });
   // Wrap each total price
   $('ul.now .service li:last-child').each(function() {
     $(this).wrapAll('<div class="right" />')
   });
 
})(jQuery);

.wrapper {
  background: lightblue;
  padding: 20px;
}
.left {
  background: pink;
  padding: 0px;
}
.right {
  background: orange;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<! -- what i have -->
<h3>What i have</h3>
<ul class="now">
  <li class="private">name</li>
  <li class="private">number</li>
  <li class="private">phone</li>
  <li class="business">name</li>
  <li class="business">number</li>
  <li class="business">phone</li>
  <li class="other">name</li>
  <li class="other">number</li>
  <li class="other">phone</li>
</ul>

<!-- what i want -->
<h3>What i want</h3>
<ul class="want">
  <div class="wrapper">
    <div class="left">
      <li class="private">name</li>
      <li class="private">number</li>
    </div>
    <div class="right">
      <li class="private">phone</li>
    </div>
  </div>
  <div class="wrapper">
    <div class="left">
      <li class="business">name</li>
      <li class="business">number</li>
    </div>
    <div class="right">
      <li class="business">phone</li>
    </div>
  </div>      
  <div class="wrapper">
    <div class="left">
      <li class="other">name</li>
      <li class="other">number</li>
    </div>
    <div class="right">
      <li class="other">phone</li>
    </div>
  </div>
</ul>

Answer 1

这将遍历列表项并获取其类名，然后对每个唯一的类名进行循环。这更具活力。那对你有用吗？如果每个li有多个类，则可能值得添加数据属性..让我知道

var classes = [];

var list = $('ul.now li');

$.each(list, function(index, value) {
  var className = $(value).attr('class');
  classes.push(className);
});
var listArray = $.unique(classes);

$.each(listArray, function(index, value) {
  $('ul .' + value).wrapAll("<div class='wrapper' />");
  $('ul .' + value + ':last-child').wrapAll("<div class='right' />");
  $('ul .' + value + ':not(:last-child').wrapAll("<div class='left' />");
});

.wrapper {
  background: lightblue;
  padding: 20px;
}

.left {
  background: pink;
  padding: 0px;
}

.right {
  background: orange;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<ul class="now">
  <li class="private">name</li>
  <li class="private">number</li>
  <li class="private">phone</li>
  <li class="business">name</li>
  <li class="business">number</li>
  <li class="business">phone</li>
  <li class="other">name</li>
  <li class="other">number</li>
  <li class="other">phone</li>
</ul>

Answer 2

我找到了答案，现在它只包含服务中的元素。

但由于某种原因，它不能在jQuery v.2.2.4之上运行必须是一个更好的方式，但它对我来说word wordpress

＆＃13;

(function($) {
// Wrap private
  $('ul.now .private').wrapAll('<div class="service" />');  
  // Wrap business
  $('ul.now .business').wrapAll('<div class="service" />');
  // Wrap other
  $('ul.now .other').wrapAll('<div class="service" />');

$('.now li.gfield').each(function() {
    if ($(this.parentNode).hasClass('wrapped')) return;
        $(this).nextUntil(':last-child').andSelf().wrapAll('<div class="wrapped">');
});
})(jQuery);

＆＃13;

.service {
  background: pink;
  padding: 10px;
}
.wrapped {
  background: lightblue;
}
/* left */
.service .wrapped:first-child {
  background: lightblue;
}
/* right */
.service .wrapped:last-child {
  background: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="now">
  <li class="gfield private">name</li>
  <li class="gfield private">number</li>
  <li class="gfield private">phone</li>
  <li class="gfield business">name</li>
  <li class="gfield business">number</li>
  <li class="gfield business">phone</li>
  <li class="gfield other">name</li>
  <li class="gfield other">number</li>
  <li class="gfield other">phone</li>
  <li>Date pick here</li>
  <li>terms here</li>
  <li>submit here</li>
</ul>

＆＃13;

用class将每个元素包装到div中并包装子元素

2 个答案: