定位页面上的第一篇和最后一篇文章

Question

我在这里帮助一个学生，但我需要一些建议：

他们的模板包含带有一些锚标记的文章。这些锚标记代表＆＃34;向上移动，向下移动和移除＆＃34;。

这些文章将动态更改位置。

我在寻找的是： 当文章首次出现在页面上时，＆＃34;上移＆＃34;锚应该被删除。如果文章位于底部/最后位置，则＆＃34;向下移动＆＃34;锚应该被删除。

如果物品处于中间位置，则所有锚点都必须可用。

我知道我可以将类应用到页面上的第一篇和最后一篇文章......但是如何在不将它们列入列表的情况下专门定位这些文章。任何有关这方面的帮助将不胜感激！

<script type="text/template" id="message-edit-item-template">

$（＆＃34; .actions＆＃34）。。。第一（）的儿童（）除去（＆＃34; .move式＆＃34）

$（＆＃34; .actions＆＃34）。最后（）的儿童（）除去（＆＃34; .move向下＆＃34）;

^这只是我的实验。我将上移和下移类添加到下面的锚点，但如果不需要它们可以删除

<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>

Answer 1

你应该使用CSS。

.actions:first-child .move-up, .actions:last-child .move-down {
   display: none;
}

当您追加或添加新元素时，您的浏览器会根据它们是否与CSS选择器匹配来自动显示/隐藏元素。

请参阅：:first-child :last-child

Answer 2

隐藏/显示怎么样？

如果您需要在文章动态更改位置时再次按下按钮，则隐藏按钮而不是删除 - 没有理由将其删除。

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();

Answer 3

稍微不同的fixNavigation（）可以在以后重复使用

$(document).ready(function() {
  fixNavigation();
});

function fixNavigation() {
  $('a.pull-right').show();
  $('.well:first a.move-up').hide();
  $('.well:last a.move-down').hide();
}