suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erklärung einfacher Fragen zu parent() und siblings() in jQuery

Ausführliche Erklärung einfacher Fragen zu parent() und siblings() in jQuery

巴扎黑
巴扎黑Original
2017-06-22 14:05:051947Durchsuche

Dieser Artikel stellt Ihnen anhand eines Beispiels die Ursachen und Lösungen von Parent()- und Siblings()-Problemen vor. Er ist sehr gut und hat Referenzwert. Interessierte Freunde sollten einen Blick darauf werfen.

I Ich habe heute ein kleines Problem gefunden. Ich weiß immer noch nicht, welcher Stalk das Problem verursacht, aber ich denke, es ist einer von parent() und siblings().

Ich möchte Inhalte basierend auf den Eingabebedingungen wie diesen löschen:

Demo:


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

Mit dem oben genannten ist kein Problem:

Suchen Sie nach vorhandenen Inhalten: „COIDNG“ (wie unten gezeigt), und dieser wird auch fest im Browser angezeigt. 


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

Wenn ich jedoch den Zustand auf WW11 ändere (wie unten gezeigt), sollten nach meinem eigenen Verständnis die letzten beiden Inhalte zu WW11 gehören angezeigt werden Komm raus, aber es kommt nichts raus? Was für eine Situation? 


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

Ändern Sie dann die Suchbedingungen, indem Sie WW11 in WW11JM031 ändern, was bedeutet, dass diese Bedingung eindeutig ist und sich nicht wiederholt.

Es ist in Ordnung, die ausgewählten Bedingungen können wieder angezeigt werden.

Dann habe ich die Bedingung WW11JM031 wieder in WW11 geändert und gleichzeitig wurde 


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

in

geändert 


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

Das ist alles, was ich anzeigen möchte. Obwohl der Inhalt zufriedenstellend ist, entspricht die Anzeige nicht meinen Anforderungen.

Schließlich habe ich einen Umweg gemacht und den Stil geändert.

Aber ich bin immer noch nicht um diesen Witz herumgekommen und verstehe nicht, warum ich nur die einzigen Bedingungen herausfiltern kann.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung einfacher Fragen zu parent() und siblings() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in die Verwendung des Prev ~ Siblings-Selektors in jQueryNächster Artikel：Einführung in die Verwendung des Prev ~ Siblings-Selektors in jQuery

In Verbindung stehende Artikel

Mehr sehen