jQuery의 parent() 및 siblings()에 대한 간단한 질문에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery의 parent() 및 siblings()에 대한 간단한 질문에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-06-22 14:05:05

원래의

1939명이 탐색했습니다.

부모(), 형제() 문제의 원인과 해결 방법을 예시를 통해 소개한 글입니다. 매우 좋고 참고할만한 가치가 있습니다. 관심 있는 친구들은 함께 살펴보세요

오늘 작은 문제를 발견했습니다. , 그리고 지금은 어느 쪽이 문제를 일으키는지 알 수 없지만 parent()와 siblings() 중 하나인 것 같습니다.

다음과 같은 입력 조건에 따라 콘텐츠를 삭제하고 싶습니다.

데모:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="https://cdn.bootcss.com/weui/0.4.2/style/weui.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<script>
$(function(){
var coding = "CODING";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>
</head>
<body>
<p class="weui_cells weui_cells_access search_show" id="search_show" style="diplay:none;">
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch">CODING</a>
</p>
</p>
<p class="weui_cell bolSearch">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >WW11JS0261</a>
</p>
</p>
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >OTHER</a>
</p>
</p>
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >LITER</a>
</p>
</p>
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >POST</a>
</p>
</p>
<p class="weui_cell">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >WW11JM042222</a>
</p>
</p>
<p class="weui_cell">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch">WW11JM031855</a>
</p>
</p>
</p> 
</body>
</html>

로그인 후 복사

위는 문제 없습니다.

조건이 "COIDNG"인 콘텐츠를 검색하세요(아래) ) , 브라우저에서도 확고하게 표시됩니다.

<script>
$(function(){
var coding = "CODING";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>

로그인 후 복사

그런데 조건을 WW11로 변경하면(아래 그림과 같이) 제가 이해한 바에 따르면 WW11에 속한 마지막 두 콘텐츠가 표시되어야 하는데 아무것도 나오지 않나요? 어떤 상황인가요?

<script>
$(function(){
var coding = "WW11";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>

로그인 후 복사

그런 다음 검색 조건을 변경하여 WW11을 WW11JM031로 변경합니다. 이는 이 조건이 고유하고 반복되지 않음을 의미합니다.

괜찮습니다. 선택한 조건이 다시 표시될 수 있습니다.

그런 다음 조건을 WW11JM031을 다시 WW11로 변경하고 동시에

$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();

로그인 후 복사

를

$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show();

로그인 후 복사

로 변경하여 표시하고 싶은 모든 콘텐츠를 달성했습니다. 내용은 만족스럽지만 디스플레이가 내 요구 사항을 충족하지 않습니다.

드디어 우회해서 스타일을 바꿨어요.

근데 저는 아직도 이 농담을 이해하지 못하고, 왜 유일한 조건만 필터링할 수 있는지 이해가 되지 않습니다.

위 내용은 jQuery의 parent() 및 siblings()에 대한 간단한 질문에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!