javascript - Jquery 选择下一个元素内的嵌套元素

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>