Ausführliche Erklärung einfacher Fragen zu parent() und siblings() in jQuery-js-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-06-22 14:05:05

Original

1966 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

geändert

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

Nach dem Login kopieren

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!