过滤具有相同类别但不在同一包装器中的元素 [英] Filter through elements with same class but not in the same wrapper

问题描述

使用我找到的方法这里我正在尝试升级我的

基本上，我想用上一个和下一个按钮循环遍历我的元素。我不能使用 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）;}}） ;} //下一步所有项目$ .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）; //如果你正在寻找前面的元素应该是&（1< 1）;}））;} $。fn.findNext = function（selector）{return this.pushStack（this.findNextAll（selector）.first（） / Previous所有项目$ .fn.findPreviousAll = function（selector）{var that = this [0]，selection = $（selector）.get（）; return this.pushStack（！&&&>选择|| $ .grep（selection，function（n）{return that.compareDocumentPosition（n）&（1<< 1）; //如果您正在寻找以前的元素，它应该是&（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 ; $ 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;显示：block; padding：30px;}。wrappers {width：500px; margin：0 auto; display：block;}。item {width：31％; height：100px;利润率：1％; margin-bottom：30px; text-align：center;背景：#ccc; color：#fff; display：inline-block;}。details {background：#ddd; width：100％; padding：30px; display：none;}。 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 =itemdata-content =blabla bla bla blaaaa>按一下meee！< / div> < div class =itemdata-content =blabla BLALALA bla blaaaa>点击meee！< / div> < div class =itemdata-content =blabla blBLALbla blaaaa>点击meee！< / div> < / div> < div class =wrappers> < div class =itemdata-content =blabla bla bla randomness>点击meee！< / div> < div class =itemdata-content =blabla bla bla>点击meee！< / div> < div class =itemdata-content =blabla bla bla weeee>点击meee！< / div> < / div> < div class =wrappers> < div class =itemdata-content =blabla bla bla blaaaa>点击meee！< / div> < div class =itemdata-content =blabla bla bla ???>点击meee！< / div> < div class =itemdata-content =我完成了blaaaaing>点击meee！< / div> < / div> < div class =details> div中的内容位于此处：< 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）; 
 //如果你正在寻找以前的元素，它应该是&（1<< 1）; 
}）reverse（）
）; 
}; 
 
 $ .fn.findPrev = function（selector）{
 return this.pushStack（this.findPreviousAll（selector）.first（））; 
}; 
  

findPreviousAll 一个数组从第一个元素到我点击，所以我只是需要扭转它！和一个简单的 .reverse（）做了:)

我更新了代码片段， ：）

解决方案

更改：

  var $ prev_item = $ content.find（'。current'）。findPrev（'。item'）; 
 if（$ content.find（'。item'）。hasClass（'current'））{
 if（$ prev_item.length）{
 $ content.find（' ）.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'）; 
} 
  

JSFiddle 演示：）

Using the method I found here I'm trying to upgrade the functionality of my previous question.

Basically I want to cycle through my elements with previous and next buttons. I cannot use nextAll() and prevAll() functions because they are not all in the same wrapper, so I used the most upvoted solution from the first link. Next cycling works fine, and previous doesn't.

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>

Basically when I click previous I get sent back to first element in the list, and not to the previous one. So the findPrev() function needs modifying, and I tried a lot: changing .first() to .last() and .prev() and even .prevAll(); tried changing return that.compareDocumentPosition(n) & (1<<1);

Nothing changed that would make this go to previous item. Anybody has an idea what is wrong with it?

ANSWER

Ok, so the solution is this:

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

What the findPreviousAll function was doing was returning an array from first element to the one I clicked on, so I just needed to reverse it! And a simple .reverse() did it :)

I updated the snippet so it works! :)

解决方案

Change this:

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);
    }

to this:

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

and change this:

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

to this:

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

这篇关于过滤具有相同类别但不在同一包装器中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！