Select child 当多个 parents 具有相同的 class - Javascript

Question

我想知道您是否可以将纯 Javascript 到 select 每个 parent 的 child 与相同的 class。例如：

<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>

编辑：

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

Answer 1

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>

Answer 2

你可以这样做。

根据内容添加class。

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

Answer 3

如果要select父元素的所有子元素。您可以在 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
     }
  }

Select child 当多个 parents 具有相同的 class - Javascript

Select child when multiple parents with same class - Javascript

html

javascript

children