Maison > interface Web > js tutoriel > le corps du texte

Exemple d'analyse sur le code d'opération simple de prev() dans jQuery

小云云
Libérer: 2017-12-26 15:22:04
original
1346 Les gens l'ont consulté

La fonction

prev() est utilisée pour faire correspondre l'élément frère précédent de l'ensemble d'éléments. Seul l'élément frère précédent est sélectionné et ses éléments enfants seront ignorés. Cet article présente principalement le code de fonctionnement simple de prev() dans jQuery. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer.

Un ami m'a fait une demande : cliquez sur le bouton pour supprimer l'entrée. S'il ne reste qu'une seule entrée, cliquez sur le bouton pour les supprimer toutes.

C'est une opération très simple, mais si vous ne savez pas qu'il existe une méthode prev() dans jquery, vous risquez de faire beaucoup de détours.

Code :

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>
Copier après la connexion

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;
  }
Copier après la connexion

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>
Copier après la connexion

J'ai écrit ici un mélange, non standardisé, juste une châtaigne, l'accent est mis sur la compréhension.

Recommandations associées :

Exemples d'utilisation de la méthode prev() dans jQuery

10 articles recommandés sur prev()

séquence de fonctions de tableau php prev()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!