jQuery toggle class for element x in container

Question

I have an issue toggling a class for a certain element inside a container. there are multiple elements in different locations. Current HTML:

<dl class="sp-methods">
    <h4>Recurring</h4>
    <div>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
    <h4>Transfers</h4>
    <div>
        <dt class="payment-method">
            <label for="p_method_FIRL_">
                <input type="radio" id="p_method_FIRL_" value="FIRL" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
 </dl>

Be aware: it also occurs that the dt/dd elements are repeated inside the main div, so there is one long list of dt/dd elements, thus not grouped per div:

<dl class="sp-methods">
    <h4>Recurring</h4>
    <div>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
 </dl>

I toggle a class on the change of the radiobutton so the label visually changes. The problem i have is that i can't seem to toggle the correct elements while still relating to $j(this) since the dt element sometimes sits inside its own div, and sometimes it sits right in the main div with all the other dt's, thus i can't use .siblings. At least i think.

Please help, thanks :)

$j('.sp-methods label input[type=radio]').change(function() {
    $j('.sp-methods .payment-method').removeClass("checked");
    $j(this).parent().parent().addClass("checked").siblings().removeClass("checked");
});

Answer 1

The following javascript is sufficient to cover both cases, I have used jquery closest to reach the dt rather than 2 parent function calls:

$('.sp-methods label input[type=radio]').change(function() {
        // first reach the closes dl and find all the dt and remove the class checked
        $(this).closest('.sp-methods').find('.payment-method').removeClass("checked");
        // then find the closest dt and add the class checked
        $(this).closest('dt').addClass("checked");
    });

You have a problem with your markup where you missed a quote for class attribute of some dt elements :

<dt class="payment-method> shall be <dt class="payment-method">

Code Snippet:

$('.sp-methods label input[type=radio]').change(function() {
        $(this).closest('.sp-methods').find('.payment-method').removeClass("checked");
        $(this).closest('dt').addClass("checked");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="sp-methods">
    <h4>Recurring</h4>
    <div>
        <dt class="payment-method">
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
    <h4>Transfers</h4>
    <div>
        <dt class="payment-method">
            <label for="p_method_FIRL_">
                <input type="radio" id="p_method_FIRL_" value="FIRL" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
 </dl>