Как я могу настроить таргетинг на элемент относительно выбранного элемента?

Question

Учитывая структуру HTML, показанную ниже, я надеюсь, что если вы нажмете p в ul, то div.selected рядом с этим ul будет выполнено .css("background", "yellow").

<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>

Пока у меня есть;

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

Answer 1

$("p").next("div .selected").addClass("selected");

Answer 2

Вам понадобится:

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

on() был представлен в jQuery 1.7, поэтому, если вы используете более старую версию, попробуйте;

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

Чтобы добавитьобработчик события для клика вам нужно использовать метод события .См. Также документацию для on(), closest() (для выбора первого предка, соответствующего селектору), nextAll() (для выбора следующегобратья и сестры, которые соответствуют селектору; в отличие от next(), который рассматривает только следующий элемент для выбора).

Answer 3

Почему бы вам не добавить ниже CSS

.selected{
       bacground-color:yellow;
}

или вы можете попробовать это

$("p").parents('ul').siblings("div.selected").css("background-color", "Red")

Answer 4

Лучше добавить класс css, чтобы отделить css от js, например:

$('div.selected').addClass('className');