Question

Given the HTML structure shown below, I’m hoping that if you click on a p in a ul the div.selected next to that ul will have .css("background", "yellow") performed on it.

<ul>
    <li>
        <p>Hello</p>
        <p>Hello</p>
    </li>
</ul>

<div>Hello Again</div>
<div class="selected">Hello Again</div>
<div><span>And Again</span></div>

<ul>
    <li>
        <p>Hello</p>
        <p>Hello</p>
    </li>
</ul>


<div>Hello Again</div>
<div class="selected">Hello Again</div>
<div><span>And Again</span></div>

So far I’ve got;

$("p").next("div .selected").css("background", "yellow");

Answer 1

You’ll need:

$('ul').on('click', 'p', function () {
    $(this).closest('ul').nextAll('div.selected:first').css('background', 'yellow');
});

on() was introduced in jQuery 1.7, so if you’re using an older version, try;

$('ul p').bind('click', function () {
    $(this).closest('ul').nextAll('div.selected:first').css('background', 'yellow');
});

To add a event handler to a click you need to use an event method. See also the documentation for on(), closest() (to select the first ancestor which matches a selector), nextAll() (which selects the next siblings which matches the selector; as apposed to next() which only considers the next element for selection).