как получить доступ к внутреннему тегу span в jquery

Question

У меня есть структура HTML:

            <div class="mydiv">xx
               <span>test1</span>
               <span>test2</span>
              <div class="inerdiv">
                 <span>inner span</span>
               </div>
               </div>
             <span>test3</span>

Теперь я хочу применить стили к диапазону, который содержит «внутренний диапазон».

$(function() {
        $(".mydiv").click(function() {

            $(".mydiv").next().find("span").css("border", "1px solid yellow");//not working
        });
    });

какой должен быть правильный код?

Answer 1

Заменить:

$(".mydiv").next().find("span").css("border", "1px solid yellow");

С:

$(".mydiv .innerdiv span").css("border", "1px solid yellow");

Я не думаю, что next() делает то, что, как вы думаете, делает.

next() возвращает ближайшего родственника всех предыдущих сопоставленных элементов.

С учетом разметки:

<div class="hello">foo1</div><span>bar1</span>
<div class="goodbye">foo2</div><span>bar2</span>
<div class="hello">foo3</div><span>bar3</span>

Следующая команда вернет элементы span, содержащие bar1 и bar3:

$("div.hello").next()

Следовательно, нет способа получить <div class="innerdiv"> из внешнего div, используя next(), поскольку они не являются братьями и сестрами.

Answer 2

$ (.mydiv .inerdiv span:contains('inner span')).css("border", "1px solid yellow")

Answer 3

$(function() {
    $(".mydiv").click(function() {

        $(".innerdiv span", this).css("border", "1px solid yellow");
    });
});