.wrapAll（）在jQuery中无法正常工作

Question

I have this code:

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

In order to change layout for the user I created a button to switch to a list style layout. I have this code so far to change some things:

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

Now I need something like $( "archive-kit-info.list" ).nextAll().wrapAll( "<table>" ); to wrap all the direct childs of the archive-kit-info.list div in a table and work from there, but the code does not work, what did I do wrong? And do I need to add .each() as well since where in a loop?

I want my layout to change to this when the user clicks the list-style button:

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

Is this doable with jQuery?

Answer 1

Your general problem is that you're operating on all elements with a class, not just the ones in the current DIV in the .each iteration. You need to use $(this).find() to restrict yourself to the current 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>");
    });
});

Note that this creates an invalid DOM -- the children of <table> have to be table elements like <tbody> or <tr>. You'll need to convert all the DIVs into rows, and their contents into <tr> elements.