finding span inside this

Question

im trying to change the display attribute of a span inside of a li using the find function of jquery....its not working and i think i know why....because the span isnt inside of the input element right? but im not sure how to fix it

heres my code:

$('form ul li input').click(function() {
    if ($(this).is(':checked'))
        $(this).find('span').attr('display', 'block');
    else
        $(this).find('span').attr('display', 'none');
});

i know all i need to do is make it so it searches the LI and not the INPUT....but im not sure how to do this.

heres the HTML for an li:

<li>

    <input type="checkbox" name="attack_strategies[]" id="strategy_4" value="4" /> 
    <label for="strategy_4">meditation</label>

    <span>

        <select name="attack_strategies_e[]" id="strategy_e_4">
        <option value="">How effective was it?</option>
        <option value="0">0</option>
        <option value="1">1</option><option value="2">2</option>
        <option value="3">3</option><option value="4">4</option>
        <option value="5">5</option><option value="6">6</option>
        <option value="7">7</option><option value="8">8</option>
        <option value="9">9</option><option value="10">10</option>          
        </select>

    </span>

</li>

Answer 1

You are right. Actually, an input element ^{[HTML4 spec]} cannot have any children:

<!ELEMENT INPUT - O EMPTY              -- form control -->

You can use closest ^[docs] to find the ancestor li and then search the span from there:

$(this).closest('li').find('span').css('display', 'block');

There might be other ways to to find the span but that depends on your HTML structure, which we don't know.