.wrapAll（）不是为我工作

Question

我有这样的代码

<div id="archive-grid-view" class="row row-mobile"> 
    <div class="list box text-shadow"> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
     <div class="col-xs-6 col-sm-4 col-md-3 list-item box archive-view-container grid"> 
     <a href="<?php the_permalink(); ?>"> 
      <div class="box-content"> 
      <img class="box-img" src="<?php the_field('postGridImage'); ?>" alt="<?php the_title();?>" title="<?php the_title();?>"> 
      <h5 class="title"><?php the_field('kitName'); ?></h5> 
      <div class="archive-kit-info grid"> 
       <?php if (has_term('none', 'countries')) {} else { ?> 
       <img class="country-flag" src="<?php bloginfo('stylesheet_directory'); ?>/images/country_flags/<?php $terms = get_the_terms($post->ID , 'countries'); foreach ($terms as $term) { echo $term->name; } ?> Flag.png" alt="><?php $term = get_field('country_of_origin');?><?php echo $term->name; ?> Flag"> 
       <?php } ?> 
       <div class="label-feature scale CB-<?php $terms = get_the_terms($post->ID , 'scales'); foreach ($terms as $term) { echo $term->slug; } ?>"> 
       <?php $terms = get_the_terms($post->ID , 'scales'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
       </div> 
       <div class="label-feature manufacturer CB-<?php $terms = get_the_terms($post->ID , 'manufacturers'); foreach ($terms as $term) { echo $term->slug; } ?>"> 
       <?php $terms = get_the_terms($post->ID , 'manufacturers'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
       </div> 
       <div class="label-feature country CB-<?php $terms = get_the_terms($post->ID , 'countries'); foreach ($terms as $term) { echo $term->slug; } ?>"> 
       <?php $terms = get_the_terms($post->ID , 'countries'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
       </div> 
       <?php if (has_term('', 'product_categories')) { ?> 
       <div class="label-feature product-categories <?php $terms = get_the_terms($post->ID , 'product_categories'); foreach ($terms as $term) { echo 'CB-' . $term->slug . ' '; } ?>"> 
        <?php $terms = get_the_terms($post->ID , 'product_categories'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
       </div> 
       <?php } else {}?> 
       <?php if (has_term('', 'vehicle_categories')) { ?> 
       <div class="label-feature vehicle-categories <?php $terms = get_the_terms($post->ID , 'vehicle_categories'); foreach ($terms as $term) { echo 'CB-' . $term->slug . ' '; } ?>"> 
        <?php $terms = get_the_terms($post->ID , 'vehicle_categories'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
       </div> 
       <?php } else {}?> 
       <div class="label-feature date"> 
       <?php echo the_time('m/d/Y h');?> 
       </div> 
      </div> 
      </div> 
     </a> 
     </div> 

    <?php endwhile; else: ?> 

     <div class="page-header"> 
     <h1>Oh no!</h1> 
     </div> 

     <p>No content is appearing for this page!</p> 

    <?php endif; ?> 
    </div> 
</div> <!-- Row Mobile --> 

为了改变布局，我创建了一个按钮，切换到列表式的布局用户。 我有这样的代码到目前为止改变一些事情：

$("#list-view-button").click(function() { 
    $(".archive-view-container").each(function() { 
     $(this).removeClass().addClass("col-xs-12 list-item box archive-view-container list"); 
     $(".country").show(); 
     $(".product-categories").show(); 
     $(".vehicle-categories").show(); 
     $(".date").show(); 
     $(".country-flag").hide(); 
     $(".archive-kit-info").addClass("list").removeClass("grid"); 
    }); 
}); 

现在，我需要这样的东西$("archive-kit-info.list").nextAll().wrapAll("<table>");包裹archive-kit-info.list DIV的所有直接孩子的一个表和工作从那里，但代码不能正常工作，我做错了什么？ 我是否还需要添加.each()以及在循环中的位置？

编辑21-09-2014

我想，当用户单击列表样式的按钮布局我要改成这样：

<div id="archive-list-view" class="row row-mobile"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Scale</th> 
 
     <th>Manufacturer</th> 
 
     <th>Country</th> 
 
     <th>Product Category</th> 
 
     <th>Vehicle Category</th> 
 
     <th>Date</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="list box text-shadow"> 
 
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
 
    
 
     <tr class="list-item box archive-view-container list"> 
 
     <td class="title"> 
 
      <?php the_field('kitName'); ?> 
 
     </td> 
 
     <td class="label-feature scale CB-<?php $terms = get_the_terms($post->ID , 'scales'); foreach ($terms as $term) { echo $term->slug; } ?>"> 
 
      <?php $terms = get_the_terms($post->ID , 'scales'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
 
     </td> 
 
     <td class="label-feature manufacturer CB-<?php $terms = get_the_terms($post->ID , 'manufacturers'); foreach ($terms as $term) { echo $term->slug; } ?>"> 
 
      <?php $terms = get_the_terms($post->ID , 'manufacturers'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
 
     </td> 
 
     <td class="label-feature country CB-<?php $terms = get_the_terms($post->ID , 'countries'); foreach ($terms as $term) { echo $term->slug; } ?>"> 
 
      <?php $terms = get_the_terms($post->ID , 'countries'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
 
     </td> 
 
     <td class="label-feature product-categories <?php $terms = get_the_terms($post->ID , 'product_categories'); foreach ($terms as $term) { echo 'CB-' . $term->slug . ' '; } ?>"> 
 
      <?php $terms = get_the_terms($post->ID , 'product_categories'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
 
     </td> 
 
     <td class="label-feature vehicle-categories <?php $terms = get_the_terms($post->ID , 'vehicle_categories'); foreach ($terms as $term) { echo 'CB-' . $term->slug . ' '; } ?>"> 
 
      <?php $terms = get_the_terms($post->ID , 'vehicle_categories'); foreach ($terms as $term) { echo '<span>' . $term->name . '</span>'; } ?> 
 
     </td> 
 
     <td class="label-feature date"> 
 
      <?php echo the_time('m/d/Y h');?> 
 
     </td> 
 
     </tr> 
 

 
     <?php endwhile; else: ?> 
 
     
 
     <div class="page-header"> 
 
     <h1>Oh no!</h1> 
 
     </div> 
 

 
     <p>No content is appearing for this page!</p> 
 

 
     <?php endif; ?> 
 
    </tbody> 
 
    </table> 
 
</div>

这是可行的jQuery？你们会怎么做呢？

谢谢！

Answer 1

您的一般问题是，您正在操作所有具有类的元素，而不仅仅是迭代中的当前DIV中的元素。您需要使用$(this).find()自己限制在当前DIV：

$("#list-view-button").click(function() { 
    $(".archive-view-container").each(function() { 
     $(this).removeClass().addClass("col-xs-12 list-item box archive-view-container list"); 
     $(this).find(".country").show(); 
     $(this).find(".product-categories").show(); 
     $(this).find(".vehicle-categories").show(); 
     $(this).find(".date").show(); 
     $(this).find(".country-flag").hide(); 
     $(this).find(".archive-kit-info").addClass("list").removeClass("grid") 
      .nextAll().wrappAll("<table>"); 
    }); 
}); 

注意，这将创建一个无效的DOM - 的<table>孩子们要像<tbody>或<tr>表元素。您需要将所有DIV转换为行，并将其内容转换为<tr>元素。