Range search inside this

im trying to change the span display attribute inside li using the find jquery function .... its not working and i think i know why .... because the span isnt inside the input element right? but I'm 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 have to do is make it look for LI, not INPUT .... but I'm not sure how to do it.

heres HTML for 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>
+5
source share
2 answers

You're right. In fact, the element input [HTML4 specification cannot have children:

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

You can use closest [docs] to find the ancestor li, and then search spanfrom there:

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

span, HTML, .

+9

this .find() :

: , , jQuery .

, find , span child.

, .

0

All Articles