你會如何編寫一個jQuery函數來返回一個沒有溢出父類的元素數組？

Question

我有一個包含的元素被設置爲溢出隱藏UL溢出容器。我將如何去獲取可見的li？

我的標記：

<div class="dm-similar-photos-content-container"> 
    <ul class="carousel" style="left: 0px;"> 
     <li class="dm-image"> 
      <img data-photoid="1" src="http://lorempixel.com/150/150/food/1"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="2" src="http://lorempixel.com/150/150/food/2"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="3" src="http://lorempixel.com/150/150/food/3"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="4" src="http://lorempixel.com/150/150/food/4"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="5" src="http://lorempixel.com/150/150/food/5"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="6" src="http://lorempixel.com/150/150/food/6"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="7" src="http://lorempixel.com/150/150/food/7"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="8" src="http://lorempixel.com/150/150/food/8"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="9" src="http://lorempixel.com/150/150/food/9"> 
     </li> 

     <li class="dm-image"> 
      <img data-photoid="10" src="http://lorempixel.com/150/150/food/10"> 
     </li> 

    </ul> 
</div> 


<div> 
    <a class="left"> 
     <- Left 
    </a> 
    <a class="right"> 
     Right ->   
    </a>  
</div> 

我的風格：

.dm-similar-photos-content-container { 
    margin: 0 30px; 
    overflow: hidden; 
    width: 335px; 
} 
.carousel { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 9999px; 
} 
.dm-similar-photos-content-container .dm-image { 
    margin: 13px 27px 13px 0; 
} 

.dm-image { 
    float: left; 
    list-style: none outside none; 
    margin: 16px 16px 0 0; 
    position: relative; 
} 


.dm-image img { 
    border: 2px solid #7F8886; 
} 

最後是簡單的左，右JS：

jQuery('.left').on('click', function() { 
    jQuery(".carousel").animate({ 
     left: "-=181" 
    }); 
}); 

jQuery('.right').on('click', function() { 
    jQuery(".carousel").animate({ 
     left: "+=181" 
    }); 
}); 

你可以在這裏看到：http://jsfiddle.net/GGhUF/

Answer 1

一般的方法是找出元素是否位於其父代的邊界框內，可以使用它們各自的寬度和偏移量進行計算。納入所有這一切最好的辦法是在一個單獨的定製選擇：

jQuery.extend(jQuery.expr[':'], { 
    inparent: function(el) { 
     parent = $(el).parent(); 
     if ($(el).offset().top >= parent.offset().top && 
      $(el).offset().top + $(el).outerHeight(true) <= parent.offset().top + parent.outerHeight(true) && 
      $(el).offset().left >= parent.offset().left && 
      $(el).offset().left + $(el).outerWidth(true) <= parent.offset().left + parent.outerWidth(true)) 
     { 
      return true; 
     } 
     return false; 
    } 
}); 

然後，您可以使用它像這樣：

var visibleli = $('li:inparent'); 

這可以從一些優化（提前退場比較寬等後明顯受益），但我會讓你解決這個問題。

這裏有一個演示：http://jsfiddle.net/DDRYj/