jQueryのprev()の簡単なオペレーションコードの解析例

小云云
リリース: 2017-12-26 15:22:04
オリジナル
1346 人が閲覧しました

prev() 関数は、要素セットの前の兄弟要素と一致するために使用されます。前の兄弟要素のみが選択され、その子要素は無視されます。この記事では、jQuery の prev() の簡単な操作コードを中心に紹介します。非常に優れており、困っている人は参考にしていただければ幸いです。

友人からリクエストがありました。入力を削除するには、ボタンをクリックしてください。入力が 1 つしか残っていない場合は、ボタンをクリックしてすべての入力を削除してください。

とても単純な操作ですが、jqueryにprev()メソッドがあることを知らないと、かなり遠回りしてしまうかもしれません。

コード:

html


<p>
  <input type="text" placeholder="用户名">
  <input type="text" placeholder="用户名">
  <input type="text" type="hidden">
  <input type="text" type="hidden">
  <a class="reduce" onclick="less()">—</a>
 </p>
ログイン後にコピー

css


.reduce{
   display: inline-block;
   color: white;
   text-align: center;
   width: 30px;
   height: 30px;
   background: red;
   line-height: 30px;
   cursor: pointer;
  }
  input{
   height: 18px;
   padding: 5px 10px;
  }
ログイン後にコピー

JS


<script src="jquery-1.7.2.min.js"></script>
<script>
 var Reduce = document.getElementsByClassName("reduce");
 var Inp = document.getElementsByTagName("input");
 function less(){
    //查找元素的上一个元素 并移除
  $(".reduce").prev().remove();
  if(Inp.length < 1){
   $(".reduce").remove()
  }
 }
 $(".reduce")
</script>
ログイン後にコピー

私はここに混合物を書きました、標準化されていない、ただの栗です、理解することに重点を置いています。

関連する推奨事項:

jQueryでのprev()メソッドの使用例

prev()に関するおすすめ記事10選

php配列関数シーケンスprev()

以上がjQueryのprev()の簡単なオペレーションコードの解析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!