實例分析關於jQuery裡prev()的簡單操作程式碼
Dec 26, 2017 pm 03:22 PM
jquery
實例分析
prev() 函數被用來匹配元素集的前一個兄弟元素,僅僅只有前一個兄弟元素被選擇,其子元素將被忽略。本文主要介紹了jQuery裡prev()的簡單操作程式碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下,希望能幫助到大家。
有個朋友提了個需求給我:點選按鈕刪除input,如果input剩下一個,點選按鈕全部消失。
很簡單的操作,但你如果不知道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()的簡單操作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)