>  기사  >  웹 프론트엔드  >  jQuery에서 prev()의 간단한 연산 예에 대한 자세한 설명

jQuery에서 prev()의 간단한 연산 예에 대한 자세한 설명

小云云
小云云원래의
2018-01-20 09:59:411490검색

이 글은 jQuery에서 prev()의 간단한 연산 코드를 주로 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

prev() 함수는 요소 세트의 이전 형제 요소를 일치시키는 데 사용됩니다. 이전 형제 요소만 선택되고 해당 하위 요소는 무시됩니다. 여기서는 jQuery에서 prev()의 간단한 동작을 소개하겠습니다. 구체적인 내용은 다음과 같습니다.

친구가 요청했습니다. 입력 내용이 하나만 남아 있으면 버튼을 클릭하세요. 버튼을 누르면 모두 사라집니다.

아주 간단한 작업이지만 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.