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>

以下内容将返回包含bar1和bar3的元素：

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

因此，无法使用<div class="innerdiv">从外部div获取next()，因为他们不是兄弟姐妹。

Answer 2

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

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

Answer 3

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

如何在jquery中访问内部span标记

3 个答案: