關(guān)于jQuery里prev()的簡(jiǎn)單操作代碼

更新時(shí)間：2017年10月27日 14:09:04 投稿：mrr

這篇文章主要介紹了jQuery里prev()的簡(jiǎn)單操作代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

prev() 函數(shù)被用來(lái)匹配元素集的前一個(gè)兄弟元素，僅僅只有前一個(gè)兄弟元素被選擇，其子元素將被忽略。這里給大家介紹jQuery里prev()的簡(jiǎn)單操作，具體內(nèi)容如下：

一個(gè)朋友提了個(gè)需求給我：點(diǎn)擊按鈕刪除input，如果input剩一個(gè)，點(diǎn)擊按鈕全部消失。

很簡(jiǎn)單的操作，但是你如果不知道jquery里有prev（）這個(gè)方法，可能你會(huì)走很多彎路。

代碼：

html

<div>
  <input type="text" placeholder="用戶名">
  <input type="text" placeholder="用戶名">
  <input type="text" type="hidden">
  <input type="text" type="hidden">
  <a class="reduce" onclick="less()">—</a>
 </div>

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;
  }

<script src="jquery-1.7.2.min.js"></script>
<script>
 var Reduce = document.getElementsByClassName("reduce");
 var Inp = document.getElementsByTagName("input");
 function less(){
    //查找元素的上一個(gè)元素 并移除
  $(".reduce").prev().remove();
  if(Inp.length < 1){
   $(".reduce").remove()
  }
 }
 $(".reduce")
</script>

這里我混合寫(xiě)的，不規(guī)范，只做一個(gè)栗子，重在理解。

總結(jié)

以上所述是小編給大家介紹的關(guān)于jQuery里prev()的簡(jiǎn)單操作代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

jquery
prev

相關(guān)文章

jQuery實(shí)現(xiàn)導(dǎo)航滾動(dòng)到指定內(nèi)容效果完整實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航滾動(dòng)到指定內(nèi)容效果,結(jié)合完整實(shí)例形式分析了頁(yè)面元素屬性動(dòng)態(tài)變換操作相關(guān)技巧,涉及jQuery插件jquery.scrollto.js的使用,并附帶demo源碼下載供讀者下載參考,需要的朋友可以參考下
2016-09-09
jquery.form.js框架實(shí)現(xiàn)文件上傳功能案例解析（springmvc）
這篇文章主要為大家詳細(xì)介紹了jquery.form.js/springmvc文件上傳功能的實(shí)現(xiàn)步驟，使用的技術(shù)有jquery.form.js框架，以及springmvc框架，具有實(shí)用價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery實(shí)現(xiàn)下拉框左右移動(dòng)（全部移動(dòng)，已選移動(dòng)）
本文主要介紹jQuery中利用appendTo()方法追加元素已實(shí)現(xiàn)左右移動(dòng)的功能，希望對(duì)大家有所幫助。
2016-04-04
基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片輪播效果，利用Jquery制作焦點(diǎn)圖左右輪播特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-02-02
全面詳細(xì)的jQuery常見(jiàn)開(kāi)發(fā)技巧手冊(cè)
這篇文章主要為大家分享了一份全面詳細(xì)的jQuery常見(jiàn)開(kāi)發(fā)技巧手冊(cè)，幫助大家更好的進(jìn)行jquery開(kāi)發(fā)，感興趣的小伙伴們可以參考一下
2016-02-02
多功能jQuery樹(shù)插件zTree實(shí)現(xiàn)權(quán)限列表簡(jiǎn)單實(shí)例
這篇文章主要介紹了多功能jQuery樹(shù)插件zTree實(shí)現(xiàn)權(quán)限列表簡(jiǎn)單實(shí)例，優(yōu)異的性能、靈活的配置、多種功能的組合，是樹(shù)插件zTree最大的優(yōu)勢(shì)，感興趣的小伙伴們可以參考一下
2016-07-07
jQuery產(chǎn)品間斷向下滾動(dòng)效果核心代碼
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動(dòng)的核心代碼,需要的朋友可以參考下
2014-05-05
基于jquery的仿百度搜索框效果代碼
最近項(xiàng)目中用到類似百度的輸入框，于是自己用jquery寫(xiě)了一個(gè)。希望和大家共同分享一下。存在許多bug，請(qǐng)各位不吝賜教。
2011-04-04
juqery 學(xué)習(xí)之三選擇器可見(jiàn)性元素屬性
juqery 學(xué)習(xí)之三選擇器可見(jiàn)性元素屬性，需要的朋友可以參考下。
2010-11-11
jquery實(shí)現(xiàn)盒子下拉效果示例代碼
當(dāng)把鼠標(biāo)移動(dòng)到盒子上的時(shí)候上面就會(huì)出現(xiàn)一個(gè)黑色的盒子,這是在瀏覽網(wǎng)頁(yè)的時(shí)候看到的一個(gè)效果，具體實(shí)現(xiàn)如下，感興趣的朋友可以了解下
2013-09-09