0
我有一個加載更多的按鈕，加載10個新的隱藏div的點擊，問題是我有40個隱藏div的按鈕設置在40的div，即使它們被隱藏，我只是希望它的位置直接位於所示的最後一個div下面，所以當你點擊它時，它應該加載10個更多的隱藏div，並直接下來設置在最後新顯示的div下。有任何想法嗎？加載更多的按鈕位置總是從它正在加載的位置下降
下面是HTML代碼（不是隱藏div'd應該出現在按鈕的點擊都在的的div的：
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="leb news.css">
<title> leb news</title>
</head>
<div class="all" dir="rtl" lang="ar">
<body>
<div class="header">
<h1>
اخبارلبنان
<img src="paper.gif" alt="paper" height="115" />
LebNews
</h1>
</div>
<div class="clockall">
<div class="clock">
<div class="list">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0" style="float: right">
<TD height="100%" vAlign="top" rowSpan="2" width="181" align="center">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0">
<TR>
<TD style="BACKGROUND-IMAGE: url(Images/Menu/bgd.gif); BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left top"
vAlign="top" align="center" bgColor="transparent" height="100%"> <TABLE id="T_Menu" cellSpacing="0" cellPadding="0" width="80%" border="0">
<TR>
<TD vAlign="middle" align="center" height="100"><BR>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD align="center"><table cellspacing="0" rules="all" border="1" id="Menu1_Ad_menu" style="border-collapse:collapse;">
<tr align="Center" style="color:#ffa500;background-color:#ffa500;border-width:0px;border-style:Groove;font-family:Trebuchet MS;font-size:12pt;font-weight:bold;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl1:ad_button" value="الرئيسية" id="Menu1_Ad_menu__ctl1_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl2:ad_button" value="اخبار" id="Menu1_Ad_menu__ctl2_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl3:ad_button" value="فن" id="Menu1_Ad_menu__ctl3_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl4:ad_button" value="رياضة" id="Menu1_Ad_menu__ctl4_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl5:ad_button" value="أدب" id="Menu1_Ad_menu__ctl5_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
</table>
</table>
</table>
</table>
</div>
<div class="article" align="right" style="display: inline-block;" >
<br>
<div class="27" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="28" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="29" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="30" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="31" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="32" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2" >
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="33" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="34" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<div class="button">
<button type="button" name="more" id="load">More</button>
</div>
</body>
</html>
這裏是jquery的按鈕：
$(document).ready(function(){
$("div").slice(0, 14).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$("div:hidden").slice(0, 10).show();
// select next 10 hidden divs and show them
if($("div:hidden").length == 0){ // check if any hidden divs still exist
alert("No more divs"); // alert if there are none left
}
});
})
和CSS：
html {
background: url(32784_FLS_W01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header h1{
position: absolute;
/*background-color:#C63D0F; */
background-color:transparent;
padding:50px;
padding-left:250px;
padding-right:200px;
margin-left:65px;
margin-right:65px;
font-size:80px;
/* vertical-align: top; */
}
.all {
width: 1370px;
/*height: auto;*/
}
.list {
填充頂：0像素; padding-right：65px;
}
.article img{
height:150px;
width:150px;
border:"5";
}
.article p{
width:800px;
height:65px;
font-size:16pt;
color:black;
text-decoration: none;
}
.article{
padding-top:0px;
/*overflow:hidden;*/
}
ul #mylist li{ list-style-type: none;
}
#mylist li{display:none;}
ul #mylist li img{
height:150px;
width:150px;
border="5";
}
#load {
/* position: fixed; */
height: 30px;
width: 100%;
margin-top:0px;
overflow:hidden;
}
我真的嘗試了太多的事情在CSS中，使其工作，但它似乎應該工作的jQuery或JavaScript。希望有人能幫助。
非常感謝。
我不使用這個類反正所以失蹤「與解決方案無關，謝謝反正 –