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

Question

我试图理解这篇文章中的以下代码,我无法找出为什么我们使用Children vs Siblings.我可以理解儿童可以遵循嵌套标签,但兄弟姐妹的水平是多少？

$('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

useparent('div')允许您定位该父级，

use.siblings('.flex-column')将针对您父母的所有兄弟姐妹.flex-column，然后为每个兄弟姐妹去他们的孩子找到 h2 与 classaddMsg或removeMsg。

对于每个做淡入/淡出。

$('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>