如何使用jquery在列表框中包装相同的类元素？

时间：2018-01-19 06:24:15

标签： javascript jquery html jquery-ui dom

请检查下面的代码我想在一个div的包装中显示相同的类元素，如红色。我在代码片段中的评论区域中进行了描述。请查看评论部分，并给我一个建议，告诉我们如何做。在代码中，我使用了带有wrapAll（）方法的jQuery函数nextUntil（）。将所有相同的元素包装在一个div中，但它的wrap div也作为子节点。

jQuery('.row').find('li').each(function() {
	if(jQuery(this).hasClass('red')) {
		jQuery(this).prev().nextUntil( "li.blank" ).css( "background-color", "red" );
		jQuery(this).prev().nextUntil( "li.blank" ).wrapAll('<div class="new"></div>');
	}
	
});
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
 <body>
 
 
 <div class="row">
			<div class="centering">
				<ul>
					<li class="blank">list one</li>
					<li class="blank">list one list one</li>
					<li class="blank">list one list one list one</li>
					<li class="blank">list one list one list one list one</li>
					<li class="red">list one list one list one list one list one</li>
					<li class="red">list one</li>
					<li class="red"> list one list one</li>
					<li class="red blue">list one list one list one</li>
					<li class="blank">list one</li>
					<li class="blank">list one list one</li>
					<li class="blank">list one list one list one</li>
					<li class="red">list one list one list one list one list one</li>
					<li class="red blue">list one</li>
					<li class="blank">list one</li>
					<li class="blank">list one</li>
					<li class="red">list one</li>
					<li class="red"> list one list one</li>
					<li class="red">list one list one list one</li>
					<li class="red">list one</li>
					<li class="red"> list one list one</li>
					<li class="red">list one list one list one</li>
					<li class="red">list one</li>
					<li class="red"> list one list one</li>
					<li class="red">list one list one list one</li>
					<li class="red">list one</li>
					<li class="red"> list one list one</li>
					<li class="red blue">list one list one list one</li>
					
				</ul>
				</div>	
			</div>
      
     <!-- 
      I want to result like as below
   <div class="row">
    <ul>
					<li class="blank">list one</li>
					<li class="blank">list one list one</li>
					<li class="blank">list one list one list one</li>
					<li class="blank">list one list one list one list one</li>
          <div class="new">
				   	<li class="red">list one list one list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red blue">list one list one list one</li>
          </div>
					<li class="blank">list one</li>
					<li class="blank">list one list one</li>
					<li class="blank">list one list one list one</li>
          <div class="new">
					  <li class="red">list one list one list one list one list one</li>
					  <li class="red blue">list one</li>
          </div>
					<li class="blank">list one</li>
					<li class="blank">list one</li>
          <div class="new">
					  <li class="red">list one</li>
				  	<li class="red"> list one list one</li>
					  <li class="red">list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red">list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red">list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red blue">list one list one list one</li>
          </div>
					
				</ul>
  </div>
 
 --> 
 
 </body>

</html>

2 个答案:

答案 0 :(得分：0)

检查上一个元素是否有red课程。

jQuery('.row').find('li.red').each(function() {
    if ( !jQuery(this).prev().hasClass( "red" ))
    {
      var matches = jQuery(this).prev().nextUntil("li.blank");
      matches.wrapAll('<div class="new"></div>');
      matches.css("background-color", "red");
    }
    //jQuery(this).prev().nextUntil("li.blank").add().css("background-color", "red");
   // jQuery(this).nextUntil("li.blank").wrapAll('<div class="new"></div>');
});

<强>演示 

jQuery('.row').find('li.red').each(function() {
    if ( !jQuery(this).prev().hasClass( "red" ))
    {
      var matches = jQuery(this).prev().nextUntil("li.blank");
      matches.wrapAll('<div class="new"></div>');
      matches.css("background-color", "red");
    }
    //jQuery(this).prev().nextUntil("li.blank").add().css("background-color", "red");
   // jQuery(this).nextUntil("li.blank").wrapAll('<div class="new"></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="centering">
    <ul>
      <li class="blank">list one</li>
      <li class="blank">list one list one</li>
      <li class="blank">list one list one list one</li>
      <li class="blank">list one list one list one list one</li>
      <li class="red">list one list one list one list one list one</li>
      <li class="red">list one</li>
      <li class="red"> list one list one</li>
      <li class="red blue">list one list one list one</li>
      <li class="blank">list one</li>
      <li class="blank">list one list one</li>
      <li class="blank">list one list one list one</li>
      <li class="red">list one list one list one list one list one</li>
      <li class="red blue">list one</li>
      <li class="blank">list one</li>
      <li class="blank">list one</li>
      <li class="red">list one</li>
      <li class="red"> list one list one</li>
      <li class="red">list one list one list one</li>
      <li class="red">list one</li>
      <li class="red"> list one list one</li>
      <li class="red">list one list one list one</li>
      <li class="red">list one</li>
      <li class="red"> list one list one</li>
      <li class="red">list one list one list one</li>
      <li class="red">list one</li>
      <li class="red"> list one list one</li>
      <li class="red blue">list one list one list one</li>
    </ul>
  </div>
</div>

答案 1 :(得分：0)

你可以使用2个概念来首先在页面上获得你的结果，然后在按钮点击下面找到概念我已经实现了jquery功能并根据需要进行着色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
 // on button click
  $('#listHeighlight').click(function(){
  $('.new').find('li.red').css('background','red')
  $('.new').find('li.blue').css('background','blue')
  //you can add your custom class
  //$('.new').find('li').addClass('red')
  })
  
 // onpageload page load you can uncomment below code
 // $('.new').find('li.red').css('background','red')
  //$('.new').find('li.blue').css('background','blue')
  //you can add your custom class
  //$('.new').find('li').addClass('red')
  })
  </script>
  
  </head>
 <body>
 
 
 <input type="button" id="listHeighlight" value="List Highlight" / >
      
  
   <div class="row">
    <ul>
					<li class="blank">list one</li>
					<li class="blank">list one list one</li>
					<li class="blank">list one list one list one</li>
					<li class="blank">list one list one list one list one</li>
          <div class="new">
				   	<li class="red">list one list one list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red blue">list one list one list one</li>
          </div>
					<li class="blank">list one</li>
					<li class="blank">list one list one</li>
					<li class="blank">list one list one list one</li>
          <div class="new">
					  <li class="red">list one list one list one list one list one</li>
					  <li class="red blue">list one</li>
          </div>
					<li class="blank">list one</li>
					<li class="blank">list one</li>
          <div class="new">
					  <li class="red">list one</li>
				  	<li class="red"> list one list one</li>
					  <li class="red">list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red">list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red">list one list one list one</li>
					  <li class="red">list one</li>
					  <li class="red"> list one list one</li>
					  <li class="red blue">list one list one listone</li>
          </div>
					
				</ul>
  </div>
 
 
 </body>

</html>

相关问题
最新问题