如何在jquery中找到div外的元素

Question

當我點擊按鈕時，它將文本打印到最近的類「print」。請有人能幫助我嗎？

HTML：

<div class ="row"> 
    <div id = "div1"> 
    <div class ="col-md-12"> 
     <button class ="button">print</button> 
    </div> 
    </div> 
    <div id ="div2"> 
    <div class ="print"> 
    </div> 
    </div> 
</div> 
<div class ="row"> 
    <div id = "div1"> 
    <div class ="col-md-12"> 
     <button class ="button">print</button> 
    </div> 
    </div> 
    <div id ="div2"> 
    <div class ="print"> 
    </div> 
    </div> 
</div> 

Answer 1

我認爲你的答案是這樣的：

$("button").click(function(e){ 
    var text = $(e.target).closest(".row").find(".print").text(); 

    alert(text) 
}) 

Answer 2

你可以使用closest() or parents()上去父div與row類，然後找到類元素print使用find()方法，最後得到文本使用text()：

$("button").on('click', function(e){ 
    console.log($(this).closest(".row").find(".print").text()); 
    //Or 
    console.log($(this).parents(".row").find(".print").text()); 
}) 

希望這會有所幫助。

$("button").on('click', function(e){ 
 
    console.log($(this).parents(".row").find(".print").text()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class ="row"> 
 
    <div id = "div1"> 
 
    <div class ="col-md-12"> 
 
     <button class ="button">print</button> 
 
    </div> 
 
    </div> 
 
    <div id ="div2"> 
 
    <div class ="print">Print div 1 content</div> 
 
    </div> 
 
</div> 
 
<div class ="row"> 
 
    <div id = "div1"> 
 
    <div class ="col-md-12"> 
 
     <button class ="button">print</button> 
 
    </div> 
 
    </div> 
 
    <div id ="div2"> 
 
    <div class ="print">Print div 2 content</div> 
 
    </div> 
 
</div>