找到元素的位置，然后使用.position（）在jquery中执行某些操作

Question

我似乎找不到jQuery理解元素当前位置的方法。我使用下面的html和css，jQuery滚动浏览一些标记（就像一个画廊 - 但我不想使用任何插件）但需要找到最后和第一个位置，这样它就不会让某人滚动内容离开页面 - 目前我只是在应用动作时为父容器着色，但是会在实时交换它以不显示或灰显分页/滚动按钮。

通过209px或-209px调整滚动工作只是不了解第一个和最后一个元素（li）的位置。我试图阻止前一个按钮工作，如果没有更多以前的李，反之亦然 - 就像我说只为现在的父母着色视觉。 当它们动态吐出时，可能会有任意数量的li。 随附的小提琴网址：http://jsfiddle.net/jambo/zLSUT/ 对于此演示中无法使用的图像表示歉意。 所以回顾一下 - 需要在没有更多内容可供查看的方向上停止分页。 希望有意义，谢谢你。

CSS

    .smartH{
    float: left; position: relative;
    width:10000px; height: 80px; padding: 5px 0;
    font-family: arial;
    background: #fff;
    }
    .smartH a{
    float: left;
      text-decoration: none; cursor:pointer;
    }
    .smartH img{
    float: left;
    width: 100px; height: 80px;
    border: none;
    }
      .smartH .title{
     float: right;
      margin: 0 5px; width:90px;
    font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
    }
    .smartH .text{
    float: right;
    margin: 5px 5px 0; width:90px; 
    font-size: 12px; color: #000; line-height: 1.1; text-align: left;
    }

    .smartAd{
    float:left;
    width:627px; overflow: hidden;
     }

     .smartH li{
    position:relative;
    float:left; display: inline;
    height:80px; width:200px; padding:0 4px 0 5px;
    list-style-type: none;
     }
     .smartAd .paginate{
    float:right
     }
     .smartAd i{
    cursor:pointer;
    }

的jQuery

    $( function () {
    var posF = $(".smartH li.first").position(); 
    var posL = $(".smartH li.last").position();     

    $("a#next").click( function () {
        $(".smartH li").stop().animate({
        left: "-=209px",
        }, 500 );
        if (posL.left == -627){
            $(".smartH").css("background", "blue");   
        }
        return false;
    });
    $("a#prev").click( function () {
        $(".smartH li").stop().animate({
        left: "+=209px",
        }, 500 );
        if (posF.left == 0){
           $(".smartH").css("background", "green");   
        }

        return false;
     }); 

    });

HTML

<div class="smartAd">
<ul class="smartH"><!-- posit abs?  -->
    <li class="first">
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">Call for a free quote today</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="coach" />
            <p class="title">Experience great days out</p>
            <p class="text">Great value coach trips</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="coffee" />
            <p class="title">Need beans?</p>
            <p class="text">We have a great variety of beans at great prices</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/creditcard.gif" alt="credit card" />
            <p class="title">Got bad credit?</p>
            <p class="text">We can help you boost your rating</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/mobility.gif" alt="mobility" />
            <p class="title">Struggling to get around?</p>
            <p class="text">Great value scooters!</p>
        </a>
    </li>
    <li class="last">
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/plumber.gif" alt="plumber" />
            <p class="title">Got a leak?</p>
            <p class="text">Ring for reliable and friendly plumbers</p>
        </a>
    </li>       
</ul><!-- // ul.smartH -->
<span class="paginate">
    <a href="" class="icon" id="prev">Prev 1-</a>
    <a href="" class="icon" id="next">- Next 1</a>      
</span>
  </div>

Answer 1

您使用错误的语法指定第一个和最后一个孩子，它应该是：

var posF = $(".smartH li:first-child").position(); 
var posL = $(".smartH li:last-child").position();  

如果遵循CSS伪选择器的行。

Answer 2

好的，所以我使用jQuery通过使用jQueries“scrollTo”（所有元素在盒子模型中具有固定的外部大小）的元素宽度或高度移动到下一个兄弟元素然后添加“animate”速度转移这个。效果很好。我在网上搜索了几天，但无法得到所需的解决方案。我希望附带的代码对其他人有很多用处。我试图尽可能地保持简单 - 没有插件的简单jQuery画廊 - 显示3个内联广告，然后点击prev / next按钮滚动到下一个。 http://jsfiddle.net/jambo/eU3jk/13/

html
<!-- jamie paterson -->
<div class="smartAd">
<ul class="smartH">
<!-- posit abs? -->
<li>    
<a href="#">
<img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">First Hampshire Rose</p>
<p class="text">For great value food with friends</p>
</a>
</li>
<li>    
<a href="#">
<img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Nara Sushi Restaurant</p>
            <p class="text">Healthy & appetising food</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Alexandra Sports</p>
            <p class="text">Running & fitness retailers</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">Blades Barbers</p>
            <p class="text">£10 off Intensive Muscle Release</p>
        </a>

    </li>
    <li>    <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Aerial Connections</p>
            <p class="text">Audio & visual entertainment</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Highgrove Windows</p>
            <p class="text">10yr guarantee as standard</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">seven</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">eight</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">nine</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Last</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>        
</ul>
<div class="nav">
    <button class="prev" title="previous"><</button>
    <button class="next" title="next">></button>
</div>
</div>
<!-- // smartAd -->

<br /><br /><br /><br /><br />

<div class="smartAdV">
<ul class="smartV">
    <!-- posit abs? -->
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">First Hampshire Rose</p>
            <p class="text">For great value food with friends</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Nara Sushi Restaurant</p>
            <p class="text">Healthy & appetising food</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Alexandra Sports</p>
            <p class="text">Running & fitness retailers</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">Blades Barbers</p>
            <p class="text">£10 off Intensive Muscle Release</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Aerial Connections</p>
            <p class="text">Audio & visual entertainment</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Highgrove Windows</p>
            <p class="text">10yr guarantee as standard</p>
        </a>

    </li>
    <li>    <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">seven</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">eight</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">nine</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Last</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>        
</ul>
<div class="nav">
    <span class="wrap">
        <button class="next" title="next">v</button>        
        <button class="prev" title="previous">^</button>
    </span>
</div>
</div>
<!-- // smartAdV -->

    css
    /* jamie paterson */
    /* start horizontal */
    .smartAd {
    float:left; position:relative; /* pos:rel for IE7 only when hasLayout init */
    width:627px; overflow:hidden;
    }
    .smartH {
    width:10000px; position:relative; float:left;
    height: 80px; padding: 0; margin:0;
    font-family: arial;
    background: #fff;
    }
.smartH img, .smartV img{
    float: left;
    width: 100px; height: 70px;
    border: none;
}
.smartH .title{
    float: right;
    margin: 0 0 0 5px; width:100px;
    font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
}
.smartH .text{
    float: right;
    margin: 5px 5px 0; width:95px; 
    font-size: 12px; color: #000; line-height: 1.1; text-align: left;
}
.smartH a, .smartV a{
    float: left;
    text-decoration: none; cursor:pointer;
}
.smartH li {
    display: inline-block; float:left;
    width:205px; margin:0 4px 0 0; height: 70px; padding: 5px 0;
}
.smartAd .nav {
    float: right;
    width:33px; margin: 10px 0 0;
}
button{
    border: none; cursor: pointer;
    background-image:url("images/carousel-arrows.gif");
}
.prev{
    float: left;
    width:16px; height:16px; margin: 0 1px 0 0;
    background-position: 0 16px;
}
.next{
    float: right;
    width:16px; height:16px;
    background-position: 0 0;
}
/* end Horizontal Style */
/* start Vertical style */
.smartAdV {
    float:left; clear:left; position:relative; /* pos:rel for IE7 only when hasLayout init */
    height:616px; padding: 0 10px; overflow:hidden;
}
.smartV {
    width:100px; position:relative; float:left;
    height: 10000px; padding: 0; margin:0;
    font-family: arial;
    background: #ebebeb;
}
.smartV .title{
    float: left;
    margin: 8px 0; width:100px;
    font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
}
.smartV .text{
    float: right;
    margin: 5px 0 10px; width:100px; 
    font-size: 12px; color: #000; line-height: 1.4; text-align: left;
}
.smartV li {
    display: inline-block; float:left;
    width:100px; margin:0 0 8px; height: 180px; padding: 10px 0 0;
    border-top: 1px solid #ebebeb; border-bottom:1px solid #ebebeb;
    background: #fff;
}
.smartAdV .nav {
    float: left; position:relative; left:-100px; bottom: -600px;
    width:100px; margin: 0;
    background:#fff;
}
.smartAdV .wrap{
    float: right;
    width:33px;
}
.smartAdV .prev{
    float: left;
    width:16px; height:16px; margin: 0 1px 0 0;
    background-position: 16px 0;
}
.smartAdV .next{
    float: right;
    width:16px; height:16px;
    background-position: 16px 16px;
}
jQuery
// jamie paterson //
//adding classes via jQuery instead of direct for ease - some of these variables not used as var's
var currentElement = $(".smartH li:first"); // sets first current horiz
var lastElementThree = $(".smartH").children("li").eq(-3).addClass("lastThird"); //horiz
var firstElementOne = $(".smartH").children("li").eq(0).addClass("firstOne"); //horiz
var currentElementV = $(".smartV li:first"); // sets first current vert
var lastElementThreeV = $(".smartV").children("li").eq(-3).addClass("lastThirdV"); //vertical
var firstElementOneV = $(".smartV").children("li").eq(0).addClass("firstOneV"); //vertical
var prevBtn = $(".smartAd .prev, .smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 }); // hide but show on scroll
// HORIZONTAL section
$(".smartAd .prev").click(function () {
    currentElement = currentElement.prev();
    scrollTo(currentElement);
    $(currentElement).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li
    $(".smartAd .next").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartH").stop().animate({
        left: "+=209px" // block li's are white space dependent 
        }, 500 );
    e.preventDefault();
});
$(".smartAd .next").click(function () {
    currentElement = currentElement.next();
    scrollTo(currentElement);
    $(currentElement).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li
    $(".smartAd .prev").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartH").stop().animate({
        left: "-=209px" // block li's are white space dependent
        }, 500 );
    e.preventDefault();
});
// VERTICAL section
$(".smartAdV .prev").click(function () {
    currentElementV = currentElementV.prev();
    scrollTo(currentElementV);
    $(currentElementV).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li
    $(".smartAdV .next").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartV").stop().animate({
        top: "+=200px" // block li's are white space dependent 
        }, 500 );
    e.preventDefault();
});
$(".smartAdV .next").click(function () {
    currentElementV = currentElementV.next();
    scrollTo(currentElementV);
    $(currentElementV).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li
    $(".smartAdV .prev").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartV").stop().animate({
        top: "-=200px" // block li's are white space dependent
        }, 500 );
    e.preventDefault();
});
    function scrollTo(element) { // includes/combined horiz and vert - left action and top action respectively
        if ($(currentElement).hasClass("lastThird")){
           $(".smartAd .next").prop('disabled', true).css({ opacity: 0.5 }); 
           $(window).scrollLeft(element.position().left);
        }
        else if ($(currentElement).hasClass("firstOne")){
           $(".smartAd .prev").prop('disabled', true).css({ opacity: 0.5 });
           $(window).scrollLeft(element.position().left);
        } 
        else{
        $(window).scrollLeft(element.position().left);
        }        
        if ($(currentElementV).hasClass("lastThirdV")){ // vert
           $(".smartAdV .next").prop('disabled', true).css({ opacity: 0.5 });
           $(currentElementV).children().scrollTop(element.position().top);
        }
        else if ($(currentElementV).hasClass("firstOneV")){ // vert
           $(".smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 });
           $(currentElementV).children().scrollTop(element.position().top);
        } 
        else{ // vert
            $(currentElementV).children().scrollTop(element.position().top);
        }
    }