Question

我不理解.remove()此处的$postNav.remove();行为在下面的代码段中，如果您第一次点击“我是一个标记”，.remove()会按预期工作，分别删除<li>和<ol>，但第二次点击它只删除了<li>而不是<ol>。我不明白为什么这里的beaviour不同，html保持不变......

(function($) {
	$doc = $(document);
  
  var $container        = $('#main');
  var $pagePosts    = $container.find('div.post_list_wrapper ul');
	var $containerNav = $('section.section_things'); 
	var $postNav	  = $('ol.pagenation');
	var $catName  	  = "";
	var $name  	  = "";
	var $page	  = "1";
	var $clickTag	  = "";


	$doc.ready( function() {   
  
		 
		 $("a[rel='tag']").addClass("ajax_tag");

	function get_posts(){
					  
						  $pagePosts.empty();
						  $postNav.remove();
			        $pagePosts.html("<li>Click Im a tag and scroll down you will see the ol stacking " + $page + "</li><div class='tag'><a rel='tag' href='/things/tag/xxxx/'>I'm a tag</a></div>");
						  $containerNav.append("<ol class='pagenation'><a href='#' rel='tag'>" + $page + "Im the new ol</a></ol>");
              $page++;
						  
		 				  $("a[rel='tag']").addClass("ajax_tag");
						 		
			} //Get posts
		$container.on('click', "a[rel='tag'], .pagination a", function(event) {
					$this = $(this);
					event.preventDefault();
      
			if ($this.hasClass('ajax_tag')) {
							$clickTag = $this.text();
			} else {
							$page = parseInt($this.attr('href').replace(/\D/g,''));
			}
			get_posts();

			}); //onClick
   }); //Anonymous function
})(jQuery); //main function

@charset "UTF-8";
* {
	box-sizing: border-box;
}
body, html {
  text-align: center;
}

li {
	list-style: none;
}

/* THINGS ========================== */

.top .things .post_profile .category_label {
	padding: 9px 20px 5px;
	margin-right: 18px;
	background-color: #AE965C;
}


/* Pagenation ========================= */
.pagenation {
  text-align: center;
}
.pagenation li {
  display: inline-block;
  margin-right: 30px;
}

.pagenation li.prev a,
.pagenation li.next a {
  position: relative;
}
.pagenation li.prev a:before,
.pagenation li.next a:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -12px;
  border-top: 1px solid #666666;
  border-right: 1px solid #666666;
}
.pagenation li.prev a:before {
  right: 0px;
  margin-right: 20px;
  transform: rotate(-135deg);
}
.pagenation li.next a:before {
  left: 0px;
  margin-left: 20px;
  transform: rotate(45deg);
}
.pagenation li a:hover:before {
  border-top: 1px solid #AAAAAA;
  border-right: 1px solid #AAAAAA;
}

.pagenation li.prev a:before {
  margin-right: 10px;
}
.pagenation li.next a:before {
  margin-left: 10px;
}
}

#main > section.section_things {
	text-align: left;
}
.section_title {
	text-align: center;
}
.category_btn {
	margin-bottom: 40px;
}
.category_btn li {
	display: inline-block;
	margin-right: 30px;
}
.category_btn li:last-child {
	margin-right: 0;
}
.category_btn li a {
	text-align: center;
	display: block;
	min-width: 180px;
	padding: 6px;
	border: 2px solid #AE965C;
}

/* ----------------------------------------------
Post list , unit
---------------------------------------------- */

.post_list_wrapper ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.post_list_wrapper li {
	//width: 340px;
  margin-bottom: 40px;
  }
.post_list_wrapper li .eyecatch {
	position: relative;
}
.post_list_wrapper li .eyecatch .category_label {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 10;
}
.post_list_wrapper li .eyecatch .category_label a {
  display: block;
  text-align: center;
}
.post_list_wrapper li .post_body {
  position: relative;
  padding: 20px;
  min-height: 212px;
}

.post_list_wrapper li .post_body .post_title {
  margin-bottom: 20px;
}
.post_list_wrapper li .post_body .tag {
  position: absolute;
  bottom: 20px;
  right: 20px;
  line-height: 1;
}
@media screen and (max-width:768px) {
.category_btn {
  text-align: center;
  margin: 0 15px 15px;
}
.category_btn li {
  display: block;
  margin-right: 0;
}
.category_btn li a {
  border: none;
}

.post_list_wrapper li {
  margin: 0 auto 40px;
}
.post_list_wrapper li .post_body {
  min-height: inherit;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="mainwrapper">
<main role="main" id="main">
    <section class="section_things">
      <h1 class="section_title">Things</h1>
      <ul class="category_btn futura">
        <li class="is_active"><a href="#">ALL</a></li>
      </ul>
<div class="post_list_wrapper">
        <ul>
          <li>
            <div class="eyecatch">
              <a href="/things/things-post.html"><img src="http://placehold.it/340x30"></a>

              <span class="category_label"><a href="/category/xxxxx/">SPECIAL</a></span>
            </div>
            <div class="post_body">
              <a href="/things/things-post.html">
                   
                <div class="date">
                  <time datetime="2016-10-26">2016.10.26</time>
                </div>
                <h2 class="post_title">I'm a title</h2>
              </a>
              <div class="tag"><a rel='tag' href="/things/tag/xxxx/">I'm a tag</a></div>
            </div>
          </li>
        </ul>
      </div>
    <ol class="pagenation">
        <li class="prev"><a href="#"></a></li>
        <li class="is_active"><a href="/things/1/">1</a></li>
        <li><a href="/things/2/">2</a></li>
        <li class="next"><a href="#"></a></li>
      </ol>
 </section>

Answer 1

您查看ol堆叠的原因是，当您声明$postNav = $('ol.pagenation')时，您正在遍历DOM，并将所有找到的元素存储在变量{{1}中}}

这意味着稍后，任何新添加的$postNav都不是您声明变量时找到的元素的一部分。您可以通过以下方式解决此问题：

在ol.pagenation

$('ol.pagenation').remove()

get_posts

$postNav

都会更新ol.pagenation变量，以便下次$postNav = $('ol.pagenation');拥有最新找到的元素。

选项2的好处是，如果您需要在任何其他功能中访问$postNav，他们将可以访问最新的DOM元素。但是，如果您不需要在其他地方访问这些元素，则选项1可能就足够了。

<强> JSFIDDLE OPTION 1

<强> JSFIDDLE OPTION 2

OnClick元素只删除了一次

1 个答案: