ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryのprev()の簡単な操作例を詳しく解説

jQueryのprev()の簡単な操作例を詳しく解説

小云云
リリース: 2018-01-20 09:59:41
オリジナル
1546 人が閲覧しました

この記事では主に jQuery の prev() の簡単な操作コードを紹介します。非常に優れており、困っている人は参考にしていただければ幸いです。

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()関数に関するおすすめ記事10選

以上がjQueryのprev()の簡単な操作例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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