我正在这里帮助一名学生。他们有包含带有一些 anchor 标记的文章的模板。这些 anchor 标记代表“上移、下移和移除”。
这些文章会动态改变位置。
我正在寻找的是:当文章首先出现在页面上时,应该删除“上移” anchor 。如果文章位于底部/最后位置,则应删除“下移” anchor 。
如果文章处于中间位置,则所有 anchor 必须可用。
我知道我可以将类应用到页面上的第一篇和最后一篇文章,但我如何才能专门针对这些文章而不将它们放在列表中。
<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 选择器自动显示/隐藏这些元素。
关于javascript - 定位页面上的第一篇和最后一篇文章,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28115890/