定位页面上的第一篇文章和最后一篇文章
Target first and last article on a page
我在这里帮助一个学生。它们具有包含带有一些锚标记的文章的模板。这些锚标记表示"上移、下移和删除"。
这些文章将动态更改位置。
我正在寻找的是:当文章首先出现在页面上时,应该删除"上移"锚点。如果文章位于底部/最后一个位置,则应删除"下移"锚点。
如果文章处于中间位置,则所有锚点都必须可用。
我知道我可以将类应用于页面上的第一篇文章和最后一篇文章,但是我怎样才能专门针对这些文章而不将它们放在列表中。
<script type="text/template" id="message-edit-item-template">
## $(".actions").first().children().remove(".move-up")
## $(".actions").last().children().remove(".move-down");
## ^ this is just me experimenting. I added the move-up and move-down classes to the anchors below, but they can be removed if not needed
<article class="well" data-message-id="<%= data.id %>">
<div class="message">
<div class="highlight clearfix">
<div class="actions">
<a href="#" data-remove="true" class="pull-right" title="Remove"><i class="fa fa-close"></i> Remove</a>
<a href="#" data-move-up="true" class="pull-right move-up" title="Move Up"><i class="fa fa-arrow-up"></i> Move Up</a>
<a href="#" data-move-down="true" class="pull-right move-down" title="Move Down"><i class="fa fa-arrow-down"></i> Move Down</a>
</div>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" name="title" value="<%= data.title %>" class="form-control"/>
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" class="form-control"><%= data.message %></textarea>
</div>
</div>
</article>
</script>
你应该为此使用 CSS。
.actions:first-child .move-up, .actions:last-child .move-down {
display: none;
}
当您附加或预置新元素时,您的浏览器将根据元素是否与 CSS 选择器匹配自动显示/隐藏这些元素。
请参阅::first-child
:last-child
fixNavigation() 略有不同,以后可以重用
$(document).ready(function() {
fixNavigation();
});
function fixNavigation() {
$('a.pull-right').show();
$('.well:first a.move-up').hide();
$('.well:last a.move-down').hide();
}
隐藏/显示呢?
如果您需要在文章动态更改其位置时再次显示按钮,请隐藏按钮而不是删除 - 没有理由删除它们。
your_function_to_change_dynamically_articles_positions(){
// some code...
$(".move-up, .move-down").hide();
$(".move-up:not(:first)").show();
$(".move-down:not(:last)").show();
}
[更新的 JSfiddle]
JSFiddle
$(".move-up").click(function(){
var $parent = $(this).closest('article');
$parent.insertBefore($parent.prev());
showHide();
});
$(".move-down").click(function(){
var $parent = $(this).closest('article');
$parent.insertAfter($parent.next());
showHide();
});
$(".remove").click(function(){
$(this).closest('article').remove();
showHide();
});
function showHide(){
$(".move-up, .move-down").show();
$(".move-up:first").hide();
$(".move-down:last").hide();
}
showHide();
相关文章:
- 使用ajax在多个页面上发布一篇文章
- 计算一篇文章中的节数(不止一篇文章)
- 计算一篇文章中有多少节
- 如何提供指向'下一篇文章'
- 翻译一篇文章'上.单击'PHP中的事件,来自'window.open'到基本URL链接
- 我怎么能只用Javascript(AJAX)编写其中一篇文章呢
- 单击我的joomla网站上的模块标题以指向一篇文章
- 定位页面上的第一篇文章和最后一篇文章
- jquery按钮只在一篇文章中启用
- 如何点击按钮显示下一篇文章
- 将变量数据从.js的一篇文章中抓取到php中
- 每回一篇文章,页面都会向后滚动
- 如何获取我的博客上最后一篇文章的日期,并将其显示在另一个网站上?
- 在领英上发表一篇文章
- 使用Tumblr API获取下一篇或上一篇文章
- 在展开下一篇文章时折叠文章(Readmore.js - Extension)
- 如何滚动一个大的表面?(例如一篇文章)
- Angular Typeahead:点击建议并立即发表一篇文章
- 如何水平滚动到页面中的下一篇文章(或#等)
- 如何在网页上为网页上的每一篇文章单独添加facebook分享按钮