javascript - 过滤具有相同类但不在同一包装器中的元素

Question

使用我找到的方法here我正在尝试升级我的 previous question 的功能.

基本上我想使用上一个和下一个按钮循环浏览我的元素。我不能使用 nextAll()和 prevAll()功能，因为它们并不都在同一个包装器中，所以我使用了第一个链接中最受欢迎的解决方案。下一次循环工作正常，而前一次则不行。

var $content = $(".big_container");
var $loaded_content = $(".details");
var $item_selector = $(".item");
var $previous = $('.previous');
var $next = $('.next');

if ($content.length > 0) {
  $item_selector.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    load_gallery_container($this);
  });

  $next.on('click', function(e) {
    e.preventDefault();

    var $next_item = $content.find('.current').findNext('.item');
    if ($content.find('.item').hasClass('current')) {
      if ($next_item.length) {
        $content.find('.item').removeClass('current');
      }
      load_gallery_container_next_prev($next_item);
    }
  });

  $previous.on('click', function(e) {
    e.preventDefault();

    var $prev_item = $content.find('.current').findPrev('.item');
    if ($content.find('.item').hasClass('current')) {
      if ($prev_item.length) {
        $content.find('.item').removeClass('current');
      }
      load_gallery_container_next_prev($prev_item);
    }
  });


}

//Next all items

$.fn.findNextAll = function(selector) {
  var that = this[0],
    selection = $(selector).get();
  return this.pushStack(!that && selection || $.grep(selection, function(n) {
    return that.compareDocumentPosition(n) & (1 << 2);
    // if you are looking for previous elements it should be & (1<<1);
  }));
}

$.fn.findNext = function(selector) {
  return this.pushStack(this.findNextAll(selector).first());
}

//Previous all items

$.fn.findPreviousAll = function(selector) {
  var that = this[0],
    selection = $(selector).get();
  return this.pushStack(!that && selection || $.grep(selection, function(n) {
    return that.compareDocumentPosition(n) & (1 << 1);
    // if you are looking for previous elements it should be & (1<<1);
  }).reverse());
}

$.fn.findPrev = function(selector) {
  return this.pushStack(this.findPreviousAll(selector).first());
}

function load_gallery_container_next_prev($container) {
  $loaded_content.find('.div_content').html($container.data('content'));
  $container.addClass('current');
}

function load_gallery_container($container) {
  if ($container.hasClass("current")) {
    $loaded_content.slideUp('slow', function() {
      $(this).removeClass('open');
      $container.removeClass("current");
    });
  } else {

    var $insert_after = $container.parent('.wrappers'),
      $current = $('.current');
    $current.removeClass('current');

    if ($current.parent('.wrappers').is($insert_after)) {
      $loaded_content.find('.div_content').html($container.data('content'));
      $container.addClass("current");
    } else {
      if ($loaded_content.hasClass("open")) {
        $loaded_content.slideUp('slow', function() {
          $(this).removeClass('open');
          $container.removeClass("current");

          $loaded_content.detach().insertAfter($insert_after);
          $loaded_content.find('.div_content').html($container.data('content'));
        });
      } else {
        $loaded_content.detach().insertAfter($insert_after);
        $loaded_content.find('.div_content').html($container.data('content'));
      }

      $loaded_content.slideDown('slow', function() {
        $container.addClass("current");
        $(this).addClass('open');
      });
    }
  }
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: $loaded_content.offset().top - 300
    }, 500);
  }, 600);
}

.big_container {
  background: #141414;
  display: block;
  padding: 30px;
}
.wrappers {
  width: 500px;
  margin: 0 auto;
  display: block;
}
.item {
  width: 31%;
  height: 100px;
  margin-right: 1%;
  margin-bottom: 30px;
  text-align: center;
  background: #ccc;
  color: #fff;
  display: inline-block;
}
.details {
  background: #ddd;
  width: 100%;
  padding: 30px;
  display: none;
}
.navigation {
  display: block;
  text-align: center;
  color: #fff;
}
.previous,
.next {
  font-size: 18px;
  display: inline-block;
  margin: 0 12px 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big_container">
  <div class="navigation">
    <div class="previous">
      <</div>
        <div class="next">></div>
    </div>
    <div class="wrappers">
      <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
      <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div>
      <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div>
    </div>
    <div class="wrappers">
      <div class="item" data-content="blabla bla bla randomness">Click on meee!</div>
      <div class="item" data-content="blabla bla bla ">Click on meee!</div>
      <div class="item" data-content="blabla bla bla weeee">Click on meee!</div>
    </div>
    <div class="wrappers">
      <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
      <div class="item" data-content="blabla bla bla???">Click on meee!</div>
      <div class="item" data-content="I am done with blaaaaing">Click on meee!</div>
    </div>
    <div class="details">The content from div goes here:
      <div class="div_content"></div>
    </div>
  </div>

基本上，当我单击上一个时，我会返回到列表中的第一个元素，而不是上一个元素。所以 findPrev()功能需要修改，我尝试了很多:更改.first()至 .last()和 .prev()甚至.prevAll() ;尝试更改 return that.compareDocumentPosition(n) & (1<<1);

没有任何改变会使它转到上一个元素。有人知道它有什么问题吗？

回答

好的，所以解决方案是这样的:

$.fn.findPreviousAll = function( selector ){
    var that = this[ 0 ],
    selection = $( selector ).get();
    return this.pushStack(
        !that && selection || $.grep( selection, function(n){
            return that.compareDocumentPosition(n) & (1<<1);
        // if you are looking for previous elements it should be & (1<<1);
        }).reverse()
    );
};

$.fn.findPrev = function( selector ){
    return this.pushStack( this.findPreviousAll( selector ).first() );
};

什么 findPreviousAll函数正在做的是从第一个元素返回一个数组到我点击的那个，所以我只需要反转它!还有一个简单的 .reverse()做到了 :)

我更新了代码片段以使其有效! :)

Answer 1

改变这个:

var $prev_item = $content.find('.current').findPrev('.item');
    if ($content.find('.item').hasClass('current')) {
      if ($prev_item.length) {
        $content.find('.item').removeClass('current');
      }
      load_gallery_container_next_prev($prev_item);
    }

为此:

var $prev_item = $(".item")[$(".item").index($(".item.current"))-1];
if($prev_item){
        $(".item.current").removeClass('current');
    }
$($prev_item).addClass('current');
load_gallery_container_next_prev($prev_item);

并改变这个:

function load_gallery_container_next_prev($container) {
  $loaded_content.find('.div_content').html($container.data('content'));
  $container.addClass('current');
}

为此:

function load_gallery_container_next_prev($container) {
    $loaded_content.find('.div_content').html($($container).attr("data-content"));
    $container.addClass('current');
}

Here is the JSFiddle demo :)