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

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

小云云
小云云オリジナル
2018-01-20 09:59:411539ブラウズ

この記事では主に 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。