Question

I have the following markup –

<div class="area 1 friendly">
        <div class="area-count">
            8
        </div>
    </div>
    <div class="area 2 friendly">
        <div class="area-count">
            9
        </div>
    </div>
    <div class="area 3 enemy">
        <div class="area-count">
            10
        </div>
    </div>
    <div class="area 4 friendly">
        <div class="area-count">
            11
        </div>
    </div>
    <div class="area 5 enemy">
        <div class="area-count">
            12
        </div>
    </div>

I am trying to select firstly one element that does not have a class of enemy and assigning its value to a variable, when I have that variable I then want to assign a value from a selected element that does not have a class of friendly.. I will then add these chosen values together. I have the following jQuery

$(".area").click(function(){
            $(".area").not(this,".enemy").removeClass("clicked");
            $(this).not(".enemy").toggleClass("clicked");
        });

Can anyone help me further this?

Answer 1

From your description, I understand that you’re looking to perform this action on “friendly” divs only. Consider the following code:

$(".area").not(".enemy").click(function() {
    var value1 = parseInt($(".area").not(this, ".enemy").first().children().html());
    var value2 = parseInt($(this).children().html());

    alert(value1 + value2);
});