Explication détaillée de questions simples sur parent() et siblings() dans jQuery-js tutoriel-php.cn

Explication détaillée de questions simples sur parent() et siblings() dans jQuery

巴扎黑

Libérer： 2017-06-22 14:05:05

original

1963 Les gens l'ont consulté

Cet article vous présente les causes et les solutions des problèmes parent() et siblings() à travers un exemple. Il est très bien et a une valeur de référence. Les amis intéressés devraient y jeter un œil ensemble

Je. J'ai trouvé un petit problème aujourd'hui, maintenant je ne sais pas quelle tige est à l'origine du problème, mais je pense que c'est celle de parent() et siblings().

Je souhaite supprimer du contenu en fonction des conditions de saisie comme celle-ci :

démo :

<!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>

Copier après la connexion

Il n'y a aucun problème avec ce qui précède :

Recherchez le contenu qui existe : "COIDNG" (comme indiqué ci-dessous), et il est également fermement affiché dans le navigateur.

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

Copier après la connexion

Cependant, lorsque je change la condition en WW11 (comme indiqué ci-dessous), selon ma propre compréhension, les deux derniers contenus appartenant à WW11 devraient être affiché Sortez, mais rien ne sort ? Quelle situation ?

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

Copier après la connexion

Ensuite, modifiez les conditions de recherche, en remplaçant WW11 par WW11JM031, ce qui signifie que cette condition est unique et non répétée.

C'est bon, les conditions sélectionnées peuvent être à nouveau affichées.

Ensuite, j'ai changé la condition WW11JM031 en WW11, et en même temps,

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

Copier après la connexion

a été changé en

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

Copier après la connexion

C'est tout ce que je veux afficher. Bien que le contenu soit satisfaisant, l'affichage ne répond pas à mes exigences.

Finalement, j'ai fait un détour et j'ai changé de style.

Mais je n’ai toujours pas contourné cette blague, et je ne comprends pas pourquoi je ne peux filtrer que les seules conditions.

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!