JQuery - Parents

I want to display either "OPEN" or "CLOSED", depending on the conditional, in the parent, but I don't know how to do this. This code makes two <h2> headings work as a drop down list. I want the function to pass the parameters, and if it does not equal 1, I want to display OPEN in the <span> of the <h2>.

Javascript

<script type="text/javascript">
    var a = null;
    var b = null;
    var c = 1;
    $(document).ready(function () {
        $(".toggle_container").hide();
        $("h2.trigger").click(function () {
            $(this).toggleClass("active").next().slideToggle("slow");
        });
    });
    function divide(a, b) {
        (a / b != c) ?
      // Where help is needed
      //  $(this).parent(".status").text("OPEN").css("color", "green") :
      //  $("team").parent(".status").text("CLOSED").css("color","red");
        document.write(a + " / " + b);
    }
</script>

HTML

 <body>
    <div class="tournaments">
    <h2 class="trigger">Tournament 1<span class="status"></span></h2>
        <div class="toggle_container">
            <div class="block">
                <h3>Details</h3>
                <p>Deadline: DATE</p>
                <p>Teams: <span class="team"><script type="text/javascript">divide(3, 7)</script></span>
                </p>
            </div>

        </div>
        <h2 class="trigger">Tournament 2 <span class="status"></span></h2>
        <div class="toggle_container">
            <div class="block">
                <h3>Details</h3>
                <p>Deadline: DATE</p>
                <p>Teams: <span class="team"><script type="text/javascript">divide(3,7)</script></span>
                </p>
            </div>
        </div>
    </div>
</body>

Solution

When you execute a JavaScript function in HTML the way you're doing, that function has no awareness of what HTML element contains it. One way to bypass that problem (my favorite way) is to put those variables in data- attributes for the DOM element, and use jQuery to extract and operate on them using .data().

Your second problem is that the h2 tag isn't a parent (container) of the span.team element. A little more DOM traversal is necessary to get to the one from the other.

http://jsfiddle.net/mblase75/fzwBM/

new HTML:

<div class="tournaments">
    <h2 class="trigger">Tournament 1<span class="status"></span></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Details</h3>
            <p>Deadline: DATE</p>
            <p>Teams: <span class="team" data-a="3" data-b="7"></span>
            </p>
        </div>
    </div>

    <h2 class="trigger">Tournament 2 <span class="status"></span></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Details</h3>
            <p>Deadline: DATE</p>
            <p>Teams: <span class="team" data-a="3" data-b="7"></span>
            </p>
        </div>
    </div>
</div>

new JS:

$(document).ready(function() {
    $(".toggle_container").hide();
    $("h2.trigger").click(function() {
        $(this).toggleClass("active").next().slideToggle("slow");
    });

    $('span.team').each(function() {
        var a = $(this).data('a');
        var b = $(this).data('b');
        var $status = $(this).closest('.toggle_container').prev('.trigger').find('.status');
console.log($status.length);
        if (a != b) {   // if a/b!=1, then a!=b
            $status.text("OPEN").css("color", "green");
        } else {
            $status.text("CLOSED").css("color", "red");
        }
        $(this).text(a + " / " + b);
    });
});