CODEWITHSUNDEEP
jquery
scarhand
scarhand

Reputation: 4337

finding span inside this

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>

Upvotes: 8

Views: 30783

Answers (2)

Felix Kling
Felix Kling

Reputation: 816324

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.

Upvotes: 13

Diosney
Diosney

Reputation: 10580

In the code you posted, this refer to the input field, and .find() documentation reads:

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

So you can't use find in an input field because it can haven't span child.

You can use what Felix Kling suggests.

Upvotes: 0

Related Questions