我有这个代码：
<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>" );将 div 的所有直接子项包装archive-kit-info.list在一个表中并从那里工作，但是代码不起作用，我做错了什么？我是否还需要.each()在循环中添加？
当用户单击列表样式按钮时，我希望我的布局更改为：
<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 可行吗？