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

您需要使用查找功能。

請嘗試以下方法：

$("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> 

另一個解決方案是使用子方法。

 $("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

 $("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>this</span> </div> <button>Click</button> <div> <span>this</span> </div> 

這應該工作。 與.find()一起使用.next() .find()

Answer 3

你可以這樣

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

演示

Answer 4

如果您需要添加類來span單擊button則需要處理button click event

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

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（）。