问检查下一个元素在jQuery中是否可选，如果可选，则选择它

EN

// Make Next Selected 
$("#movenext").click(function() {
  if ( $(".selected").is(":visible") ) {
    // Detect If New Selection Has Tag
    if ( $(".selected").next().prop("tagName") === [undefined, false] ) {
      // No Selection
      alert("last child selected");
      $("#deselectelement").trigger("click");
    } else {
      $(".selected").removeClass("selected").next().addClass("selected");
      $("#selected-tag").val( $(".selected").prop("tagName").toLowerCase() );
      $("#selected-element").val( $(".selected").attr("class").replace(/ /g," ") );
    }
  } else {
    // No element selected
    $("#moveprev, #movenext, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").addClass("hide");
  }
});

$(document).ready(function() {
  // Draggable FunctionBar
  $(".functionbar").draggable({
    axis: "y",
    handle: ".handlesbar"
  });

  // Select Elements
  var SelectElements = function() {
    $("#dynamic-storage").children().on("mouseup touchend", function() {
      if ( $(".selected").is(":visible") ) {
        $(".selected").removeClass("selected");
      }

      $(this).addClass("selected");

      // Check if first & last child is selected
      if ( $(this).is(":first-child") && $(this).is(":last-child") ) {
        if ( $("#moveprev").hasClass() === "hide" ) {
          // Do nothing
        } else if ( $("#movenext").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#moveprev, #movenext").addClass("hide");
          $("#tochild").removeClass("hide");
          return false;
        }
        // Check if first child is selected
      } else if ( $(this).is(":first-child") ) {
        if ( $("#moveprev").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#moveprev").addClass("hide");
          $("#movenext, #tochild").removeClass("hide");
          return false;
        }
        // Check if last child is selected
      } else if ( $(this).is(":last-child") ) {
        if ( $("#movenext").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#movenext").addClass("hide");
        }
        $("#moveprev, #tochild").removeClass("hide");
      } else {
        // Check if in middle
        $("#moveprev, #movenext, #tochild").removeClass("hide");
      }
    });
  };
  // Call Selection
  var CallSelection = function() {
    // Check if first & last child is selected
    if ( $(".selected").is(":first-child") && $(".selected").is(":last-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev, #movenext").addClass("hide");
        $("#tochild").removeClass("hide");
        return false;
      }
      // Check if first child is selected
    } else if ( $(".selected").is(":first-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev").addClass("hide");
        $("#movenext, #tochild").removeClass("hide");
        return false;
      }
      // Check if last child is selected
    } else if ( $(".selected").is(":last-child") ) {
      if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#movenext").addClass("hide");
      }
      $("#moveprev, #tochild").removeClass("hide");
    } else {
      // Check if in middle
      $("#moveprev, #movenext, #tochild").removeClass("hide");
    }
  };
  // Clear Selection
  var ClearSelection = function() {
    $(".selected").removeClass("selected");
    $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
  };
  SelectElements();
});

/* Body */
#dynamic-storage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/* FunctionBar */
.functionbar {
  position: absolute;
  top: 20px;
  left: 25px;
  right: 25px;
  z-index: 998;
}

.functionbar .handlesbar {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  padding: 6px 0;
  border-radius: 10px 10px 0 0;
  font: 24px arial;
  text-align: center;
  background: hsla(180, 0%, 0%, .75);
  word-spacing: 12px;
  z-index: 999;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

.functionbar a {
  text-decoration: none;
  color: hsl(180, 0%, 90%);
}

.functionbar .active {
  color: #9cf;
}

.functionbar .hide {
  display: none;
}

/* Dialog Sec */
.functionbar .reveal {
  position: relative;
  top: 50px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 200px;
  overflow: auto;
}

.functionbar .reveal, .functionbar input[type=text], .functionbar textarea {
  font-family: arial;
  background: rgba(255, 255, 255, 0.6);
}

.functionbar input[type=text], .functionbar textarea {
  border: 1px solid rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}

.functionbar input[type=text], .functionbar textarea, #change-selected-tag, #confirm-style {
  font-size: 24px;
  color: #000;
}

#dynamic-storage .selected {
  outline: 2px dotted #69f;
}

/* Addable Elements */
.functionbar .addcontent {
  text-align: center;
}

.functionbar .addcontent .element, .functionbar .editcontent .element {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 2%;
  width: 20%;
  border: 1px solid rgba(204, 204, 204, 0.67);
  color: #262B2F;
}
.functionbar .element:hover {
  background: rgba(255, 255, 255, 0.6);
}
.functionbar .element .fa {
  font-size: 26px;
}
.functionbar .element h4 {
  font-weight: 300;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link type='text/css' rel='stylesheet' href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
    <link type='text/css' rel='stylesheet' href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="assets/fonts/font-awesome.min.css" />
  </head>
  <body>
    <!-- FunctionBar -->
    <div class="functionbar">
      
      <div class="handlesbar">
        <div class="handlesbar-page1">
          <a id="moveprev" title="Select Previous Element" href="javascript:void(0)">
            <span class="fa fa-angle-left"></span>
          </a> 
          <a id="movenext" title="Select Next Element" href="javascript:void(0)">
            <span class="fa fa-angle-right"></span>
          </a> 
          <a id="toparent" class="hide" title="Select Parent" href="javascript:void(0)">
            <span class="fa fa-caret-square-o-up"></span>
          </a> 
          <a id="tochild" title="Select First Index" href="javascript:void(0)">
            <span class="fa fa-caret-square-o-down"></span>
          </a> 
        </div>
      </div>
    </div>
    
    <div id="dynamic-storage">
      <div class="header" align="center">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
        <span>Hello world</span>
      </div>
      <div class="header selected" align="left">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
      </div>
      <div class="header" align="right">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
      </div>
    </div>
  </body>
</html>