当多个父母同班时选择孩子 - Javascript答案

【问题标题】：Select child when multiple parents with same class - Javascript当多个父母同班时选择孩子 - Javascript
【发布时间】：2019-11-27 18:49:48
【问题描述】：

我想知道你是否可以使用纯 Javascript 来选择每个具有相同班级的父母的孩子。例如：

<div class="parent">
    <a href="#" rel="category tag">Category1</a>
</div>
<div class="parent">
    <a href="#" rel="category tag">Category2</a>
</div>
<div class="parent">
    <a href="#" rel="category tag">Category1</a>
</div>
<div class="parent">
    <a href="#" rel="category tag">Category2</a>
</div>

编辑：

在这种情况下，我需要选择所有的元素并根据类别更改背景颜色：如果类别是“Category1”背景应该是蓝色，如果类别是“Category2”应该是红色等等......

【问题讨论】：

如果你只是想改变样式，你可以使用CSS。.parent > a {background-color: red}，更多细节见MDN
重点是这些都是动态内容。因此，Javascript应该说（例如）如果类别是“Category1”背景应该是蓝色的，如果类别是“Category2”应该是红色等等......
请分享您尝试过的代码

标签： javascript html children

【解决方案1】：

你可以这样做。

通过添加基于内容的类。

$('.parent a').each(function() {
     var className = $(this).html().replace(' ', '').toLowerCase();
     $(this).addClass(className);
});

.category1 {
  color: orange;
}

.category2 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="parent">
    <a href="#" rel="category tag">Category1</a>
</div>
<div class="parent">
    <a href="#" rel="category tag">Category2</a>
</div>
<div class="parent">
    <a href="#" rel="category tag">Category1</a>
</div>
<div class="parent">
    <a href="#" rel="category tag">Category2</a>
</div>

【讨论】：

谢谢，非常感谢。那个 Jquery 脚本正是我想要的！我还有一个问题，只是出于个人好奇。有没有办法在 vanilla JS 中重写 Jquery 脚本？
试试这个..

【解决方案2】：

HTML 代码

<div class="category_section">
    <div class="parent">
        <a href="#" rel="category tag">Category1</a>
    </div>
    <div class="parent">
        <a href="#" rel="category tag">Category2</a>
    </div>
    <div class="parent">
        <a href="#" rel="category tag">Category1</a>
    </div>
    <div class="parent">
        <a href="#" rel="category tag">Category2</a>
    </div>
</div>

jQuery 代码

<script>
  $(document).ready(function(){

    //will get all anchor tags present inside category_section div
    $(".category_section").find('a').each(function(){

        //will get anchor tag text. Since you need to compare based on text.
        var category_value = $(this).text();

        if(category_value == 'Category1'){
            $(this).parent('.parent').css('background-color', 'blue');
        }
        else if(category_value == 'Category2'){
            $(this).parent('.parent').css('background-color', 'red');
        }
    })
 });
</script>

【讨论】：

【解决方案3】：

如果要选择父元素的所有子元素。您可以在 jquery 中通过

$( ".parent" ).children().css( "background-color", "blue" )

或仅在 Javascript 中

  var child= document.getElementsByClassName('parent');
  for(var i=0; i<child.length; i++) {
     child[i].children[0].style.color = "red";
      //children[0] - means the first child, you can do some loop if you have multiple child
     }
  }

【讨论】：