jquery this concat selector

Question

For example given this HTML:

<div>
    <p>p0</p>
    <p>p1</p>
    <p>p2</p>
</div>

I don't understand how to write a concatenated jQuery this selector, that is something like this:

$("div").on("mouseover", function () {
    $(this + " p").css({
        color: "#009"
    });
}); 

What is the correct syntax for this?

Answer 1

To find elements within another, use a contextual selector. Try this:

$("p", this).css({ /* ... */ });

Or you can concatenate the id of the parent - although this is a little ugly IMO:

$("#" + this.id + " p").css({ /* ... */ });

Or you can use find() on the parent element:

$(this).find("p").css({ /* ... */ });

Any of the above will work for you, although the second example is pretty ugly and should be avoided. Always use the this reference directly where possible.