检查下一个元素是否 select 在 jQuery 中可用，如果是，则 select 它

Question

我正在尝试构建一个甚至我侄子都可以使用的简单易用的网页设计应用程序（主要用于触摸设备）。但是我今天遇到了一个恼人的问题。经过数小时的反复试验，我现在寻求帮助:(。

我的问题是下一个和前进箭头按钮（不是方形按钮）。

我正在做的是当我点击说下一个按钮时 (#movenext) 我首先查看是否有下一个 element/tag 如果有然后我选择那个带有 class 的元素称为 .selected。如果我选择了最后一个元素，我希望得到提醒，这是我选择的父元素的最后一个子元素。

无论我做什么，我似乎都想不出如何解决这个问题。

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

Answer 1

我能够解决下一个、上一个和 child 选择的问题。

我所做的是检查 .selected class 是 :first-child 还是 :last-child 以及它是否是第一个要隐藏的 child previous 和如果它是最后一个 child 隐藏 next。这样可以防止使用下一个和上一个按钮发生任何错误。

这是我使用的代码。

// If prev element accessable make it selectable
var movePrev = function() {
  // Detect If New Selection Has Tag
  if ( $(".selected").prev().is(":visible") ) {
    // Show/Add Tag & Class
    $("#selected-tag").val( $(".selected").prev().prop("tagName").toLowerCase() );
    $(".selected").removeClass("selected").prev().addClass("selected");
    $("#selected-element").val( $(".selected").attr("class").replace(/ /g," ") );
    $(".code").val( $(".selected").html() );
    checkParent();
  }

  // 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");
      $("#toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").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, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").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, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").removeClass("hide");
  } else {
    // Check if in middle
    $("#moveprev, #movenext, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").removeClass("hide");
  }
};

Child按钮解决方案..

// If child is accessable make it selectable
var check4Child = function() {
  // Check if it has child if not hide button
  if ( $(".selected").children().length <= 0 ) {
    $("#tochild").addClass("hide");
    return false;
  }
  if ( $(".selected").children().is(":hidden") ) {
    $("#tochild").addClass("hide");
    return false;
  }
};

Parent按钮解决方案...

// #dynamic-storage & .functionbar must not be selectable
var checkParent = function() {
 if ( $(".selected").parent().is("#dynamic-storage") ) {
    $("#toparent").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");
      $("#selected-element").val( $(this).attr("class").replace(/ /g," "));
      $("#selected-tag").val( $(this).prop("tagName").toLowerCase() );
      $(".code").val( $(".selected").html() );

      checkParent();

      // 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");
      }

      check4Child();
    });
  };
  // Call Selection
  var CallSelection = function() {
    checkParent();

    // 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");
    }

    check4Child();
  };
  // Clear Selection
  var ClearSelection = function() {
    $("#selected-tag, #selected-element, .code").val("");
    $(".selected").removeClass("selected");
    $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
  };
  // If prev element accessable make it selectable
  var movePrev = function() {
    // Detect If New Selection Has Tag
    if ( $(".selected").prev().is(":visible") ) {
      // Show/Add Tag & Class
      $(".selected").removeClass("selected").prev().addClass("selected");
      checkParent();
    }

    // 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");
        $("#toparent, #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, #toparent, #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, #toparent, #tochild").removeClass("hide");
    } else {
      // Check if in middle
      $("#moveprev, #movenext, #toparent, #tochild").removeClass("hide");
    }
  };
  // If next element accessable make it selectable
  var moveNext = function() {
    // Detect If New Selection Has Tag
    if ( $(".selected").next().is(":visible") ) {
      // Show/Add Tag & Class
      $(".selected").removeClass("selected").next().addClass("selected");
      checkParent();
    }

    // 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");
        $("#toparent, #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, #toparent, #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, #toparent, #tochild").removeClass("hide");
    } else {
      // Check if in middle
      $("#moveprev, #movenext, #toparent, #tochild").removeClass("hide");
    }
    check4Child();
  };
  // If child is accessable make it selectable
  var check4Child = function() {
    // Check if it has child if not hide button
    if ( $(".selected").children().length <= 0 ) {
      $("#tochild").addClass("hide");
      return false;
    }
    if ( $(".selected").children().is(":hidden") ) {
      $("#tochild").addClass("hide");
      return false;
    }
  };
  // #dynamic-storage & .functionbar must not be selectable
  var checkParent = function() {
    if ( $(".selected").parent().is("#dynamic-storage") ) {
      $("#toparent").addClass("hide");
    }
  };
  SelectElements();

  // Handles Next/Prev/Parent/Children Selections
  $(function() {
    // Make Parent Selected 
    $("#toparent").click(function() {
      if ( $(".selected").is(":visible") ) {
        if ( $(".selected").parent().is("#dynamic-storage") ) {
          $("#toparent").addClass("hide");
        } else {
          $(".selected").parent().addClass("selected").children().removeClass("selected");
          movePrev();
          CallSelection();
        }

        // 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");
        }
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });

    // Make Child Selected 
    $("#tochild").click(function() {
      if ( $(".selected").is(":visible") ) {
        // Detect First Tag
        if ( $(".selected").children().first().length > 0 ) {
          $(".selected").removeClass("selected").children().first().addClass("selected");
          movePrev();
          CallSelection();
          check4Child();
        } else {
          ClearSelection();
        }
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });

    // Make Previous Selected 
    $("#moveprev").click(function() {
      if ( $(".selected").is(":visible") ) {
        movePrev();
        CallSelection();
        check4Child();
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });

    // Make Next Selected 
    $("#movenext").click(function() {
      if ( $(".selected").is(":visible") ) {
        moveNext();
        CallSelection();
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });
  });
});

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

检查下一个元素是否 select 在 jQuery 中可用，如果是，则 select 它

Check if next element is selectable in jQuery and if so, select it

javascript

jquery