Home > Article > Web Front-end > Detailed explanation of simple questions about parent() and siblings() in jQuery

Detailed explanation of simple questions about parent() and siblings() in jQuery

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

This article introduces to you the causes and solutions of the parent() and siblings() problems through an example. It is very good and has reference value. Friends who are interested can take a look.

I found a small problem today. , I still don’t know which stalk is causing the problem, but I feel it is one of parent() and siblings().

I want to delete content based on the input conditions like this:

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>

above This is no problem:

The search condition is the existence of: "COIDNG" (as shown below), and the content is also firmly displayed in the browser.

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

However, when I change the condition to WW11 (as shown below), according to my own understanding, the last two contents belonging to WW11 should be displayed. But nothing comes out? What a situation?

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

Then, change the search conditions, changing WW11 to WW11JM031, which means that this condition is unique and not repeated.

It’s okay, the selected conditions can be displayed again.

Then, I changed the condition WW11JM031 back to WW11, and at the same time

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

was changed to

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

That’s it for all the content I want to display. Although the content is satisfied, the display does not meet my requirements.

Finally, I took a detour and changed the style.

But I still haven’t gotten around this thread, and I don’t understand why I can only filter out the only conditions.

The above is the detailed content of Detailed explanation of simple questions about parent() and siblings() in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the use of prev ~ siblings selector in jQueryNext article：Introduction to the use of prev ~ siblings selector in jQuery

See more

Detailed explanation of simple questions about parent() and siblings() in jQuery

Related articles