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()以及循环中的位置？

当用户点击列表样式按钮时，我希望我的布局更改为：

<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

您的一般问题是您使用类操作所有元素，而不仅仅是.each迭代中当前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>元素。

Answer 2

您可以使用CSS实现类似表格的结构（请参见下面的代码段）。您只需要show()，hide()，thead和tfoot元素，只需将类更改为适当的div元素即可。

例如，基于下面的示例，我们可以写成表格行的元素：

$( ".archive-view-container" ).each(function() {
    $( this ).removeClass().addClass("list-item box archive-view-container list");
    ...
    $(".thead").show();
    $(".thfoot").show();
    ...
});
.list-item.box.archive-view-container.list {
    display: table-row
}

.table {
  display: table
}

.tr {
  display: table-row
}

.thead {
  display: table-header-group
}

.tbody {
  display: table-row-group
}

.tfoot {
  display: table-footer-group
}

.col {
  display: table-column
}

.colgroup {
  display: table-column-group
}

.td,
.th {
  display: table-cell;
  height: 2rem;
  font-size: 1rem;
  padding: 1rem 2rem 0 2rem;
  white-space: nowrap;
}
.td {
  background-color: #0FF;
}
.th, .tfoot .td {
  background-color: #F0F;
  font-weight: 700;
  color: #fff;
}
.caption {
  display: table-caption
}

<div class="archive-kit-info list table">
  <div class="thead">
    <div class="tr">
      <div class="th">Name</div>
      <div class="th">Scale</div>
      <div class="th">Manufacturer</div>
      <div class="th">Country</div>
      <div class="th">Product Category</div>
      <div class="th">Vehicle Category</div>
      <div class="th">Date</div>
    </div>
    <div>
    </div>
    <div class="tr">
      <div class="td">
        Car 1
      </div>
      <div class="td">
        10
      </div>
      <div class="td">
        Manu1
      </div>
      <div class="td">
        Greenland
      </div>
      <div class="td">
        Automobiles
      </div>
      <div class="td">
        Sport Cars
      </div>
      <div class="td">
        2019
      </div>
    </div>
  </div>
  <div class="tfoot">
    <div class="td">Name</div>
    <div class="td">Scale</div>
    <div class="td">Manufacturer</div>
    <div class="td">Country</div>
    <div class="td">Product Category</div>
    <div class="td">Vehicle Category</div>
    <div class="td">Date</div>
  </div>
</div>

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

2 个答案: