Question

从下面的结构我试图在按钮后面的跨度上放置一个类，但我似乎无法遍历包含跨度的div。

我可以使用以下方法定位div：

$("button").next('div').addClass('alert');

但是不能直接使用以下方法将该类应用于跨度：

$("button").next('div > span').addClass('alert');

或

$("button").next('div').next('span').addClass('alert');

我的示例结构是

<button>Click</button>
  <div>
    <span></span>
  </div>
<button>Click</button>
  <div>
    <span></span>
  </div>

Answer 1

您需要使用find功能。

请试试这个：

$("button").next('div').find('span').addClass('alert');

$("button").next('div').find('span').addClass('alert');

.alert{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
  <div>
    <span>abc</span>
  </div>
<button>Click</button>
  <div>
    <span>def</span>
  </div>

另一种解决方案是使用children方法。

$("button").next('div').children('span').addClass('alert');

.alert{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
  <div>
    <span>abc</span>
  </div>
<button>Click</button>
  <div>
    <span>def</span>
  </div>

Answer 2

＆＃13;

$("button").next('div').find('span').addClass('alert');

＆＃13;

.alert{color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<div>
  <span>this</span>
</div>
<button>Click</button>
<div>
  <span>this</span>
</div>

＆＃13;

这应该有效。将.next()与.find()

一起使用

Answer 3

你可以这样做

$("button").on('click',function(){
 $(this).next('div').find('span').addClass('alert');
})

DEMO

Answer 4

如果您需要将课程添加到点击span的{{1}}，则需要处理button的{{1}}

click event

Answer 5

根据文档，next（）遍历兄弟姐妹：

.next( [selector ] )
Description: Get the immediately following sibling of each element in the set 
of matched elements. If a selector is provided, it retrieves the next sibling 
only if it matches that selector.

所以你需要使用children（）代替。

Jquery在下一个元素中选择一个嵌套元素

5 个答案: