Javascript 通过 div 中的元素递增？

Question

好的，我有以下 HTML:

<div class="calculator-section">
    <p class="x"></p>
    <p class="y"></p>
</div>

<div class="calculator-section">
    <p class="z"></p>
    <p class="a"></p>
</div>

<div class="calculator-section">
    <p class="b"></p>
    <p class="c"></p>
</div>

我需要递增这些 div 中的每一个并比较每个 <p> 的类。有。

我该如何去做呢？

目前我有这个:

$('.calculator-section').each(function(i, obj) {
    $(this).$('p').each(function(i, obj) { //This bit doesn't work
        //Check classes for $(this) here?
    });
});

但我不确定该内部循环该怎么做。有什么想法吗？

Answer 1

将 p 添加到初始的每个循环中，并在循环中使用 className 属性

$('.calculator-section p').each(function(i, obj) {
    if(this.className == "x") {
       $(this).css('background', 'green')
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calculator-section">
    <p class="x">x</p>
    <p class="y">y</p>
</div>  

<小时/> 或者，如果您出于某种原因使用多个循环:

使用 $('p', this) 或 $(this).children('p')< 在特定部分的迭代中选择 p/等

$('.calculator-section').each(function(i, obj) {
    // $(this) = section
    $('p', this).each(function(i, obj) {     
        // $(this) = p within above section                
    });  
});