Maison >interface Web >js tutoriel >Explication détaillée de questions simples sur parent() et siblings() dans jQuery

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

巴扎黑original: 2017-06-22 14:05:051965parcourir

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>

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>

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>

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();

a été changé en

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à l'utilisation du sélecteur de frères et sœurs précédent dans jQueryArticle suivant：Introduction à l'utilisation du sélecteur de frères et sœurs précédent dans jQuery

Articles Liés

Voir plus