Question

我想了解this帖子中的以下代码，我无法找出为什么我们使用儿童与兄弟姐妹。我可以理解儿童可以遵循嵌套标签，但兄弟姐妹的等级是什么？

$('input:checkbox').on('change', function() {
    if ($(this).prop('checked') === true) {
        $(this).parent('div').siblings('.flex-column').children('h2.addMsg').fadeIn("fast").fadeOut(5000);
    } else {
        $(this).parent('div').siblings('.flex-column').children('h2.removeMsg').fadeIn("fast").fadeOut(5000);
    }
});

Answer 1

就像现实生活中的真实家庭一样，兄弟姐妹是具有相同父元素的元素。

所以，如果我们有

<div id=1>
  <div id=2>
  <div id=3>
  <div id=4>
</div>

ID为2,3和4的元素都是彼此的兄弟，并且是ID为1的元素的子元素。

Answer 2

兄弟姐妹不仅仅是同一水平，它也是同一个父母。兄弟姐妹就像你的兄弟/嫂子（同一父母），你不是同学的兄弟姐妹。

当您点击该复选框时，您就是div

的孩子

使用parent('div')允许您定位此父级，

使用.siblings('.flex-column')会将您父母的所有同胞定位到课程.flex-column，然后为每个兄弟姐妹找到他们的孩子，找到课程addMsg或removeMsg的h2。

每个人都做fadIn / fadeOut。

$('input:checkbox').on('change', function() {
  if ($(this).prop('checked') === true) {
    $(this).parent().siblings('.flex-column').children('h2.addMsg').fadeIn("fast").fadeOut(1000);
  } else {
    $(this).parent().siblings('.flex-column').children('h2.removeMsg').fadeIn("fast").fadeOut(1000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-column">
  <input type="checkbox" />
  <h2 class="addMsg">addMsg 1</h2>
  <h2 class="removeMsg">removeMsg 1</h2>
</div>
<div class="flex-column">
  <input type="checkbox" />
  <h2 class="addMsg">addMsg 2</h2>
  <h2 class="removeMsg">removeMsg 2</h2>
</div>
<span class="flex-column">
  <input type="checkbox" />
  <h2 class="addMsg">addMsg 3</h2>
  <h2 class="removeMsg">removeMsg 3</h2>
</span>

Answer 3

父母，兄弟姐妹，孩子是节点之间的关系（标签，如html的情况）

兄弟姐妹：共享同一父级的所有节点都是兄弟姐妹

孩子：当前节点指向父节点的所有节点都是子节点

e.g。

<html>
   <head></head>
   <body></body>
</html>

在以下示例中＆＃34; html＆＃34;是标签的父节点＆＃34; head＆＃34;和＆＃34; body＆＃34;。
＆＃34;头＆＃34;和＆＃34;身体＆＃34;标签是彼此的兄弟姐妹。
＆＃34;头＆＃34;和＆＃34;身体＆＃34;标签是与标签相关的子项＆＃34; html＆＃34;。

Answer 4

在以下无序列表示例中，<li>元素是其父<ul>元素的子元素。父级<li>上下文中的<ul>元素是兄弟姐妹：

<ul>
 <li>I am a child of my parent ul</li>
 <li>I am a sibling of the li above me</li>
 <li><span>this span is a child of this li</span></li>
</ul>

从您的jQuery中推断出，HTML可能看起来像这样：

<div class="container">

 <div class="item">
  <input type="checkbox" />
  <h2>Item header</h2>
  <p>Item content</p>
 </div>

 <div class="item">
  <input type="checkbox" />
  <h2>Item header</h2>
  <p>Item content</p>
 </div>

</div>

选中复选框时，父级是div类型中最接近的外部元素（class =＆＃34; item＆＃34;）

返回jQuery链接的div然后进一步链接以找到兄弟姐妹＆＃34;相同类型，因此：选择所有div与class =＆＃34; item＆＃34;在同一水平上。

然后选择他们的孩子并过滤1）type = h2和2）class = addMsg或removeMsg，具体取决于是否检查。

最后消失了。

Answer 5

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent1">
    <div class="child1"></div>
</div>

这里div的班级名称家长和 parent1 是这里的其他代码的兄弟姐妹

孩子和 child1 是分组的孩子

什么是兄弟姐妹和孩子之间的区别

5 个答案: