要素の子要素の値を取得する方法子要素の外側のdivをクリックすると

Question

申し訳ありませんが、私は2列、すべての列をクリックするとdiv.open-modelはモデルが表示されますh3.title、jQueryを使用私は、値h3.titleすべての列

$(document).ready(function() { 
 
    $('.open_modal').click(function(e) { 
 
    var h3title = $(this).find('.parent .title').html(); 
 
    console.log('h3title'); 
 
    e.preventDefault(); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <h3 class="title">Title1</h3> 
 
</div> 
 
<div class="open-model">Open model</div> 
 

 
<div class="parent"> 
 
    <h3 class="title">Title2</h3> 
 
</div> 
 
<div class="open-model">Open model</div>

Answer 1

を取得することはできませんprev()を試してみてください。

var h3title = $(this).prev('.parent').find(".title").text(); 

と、定着後の

他のエラー

$(document).ready(function() { 
    $('.open-model').click(function(e) { 
    var h3title = $(this).prev('.parent').find(".title").text(); 
    console.log(h3title); 
    e.preventDefault(); 

    }); 
}); 

Answer 2

あなたがここにいくつかの問題を持っている：

は

要素のクラスが open-modelある
• がそうopen_modalのあなたの選択が間違っている
• find()は子要素を探しますが、探したいターゲットは兄弟の子ですので、が必要です代わりに
• h3titleが変数なので、引数として渡しても引用符で囲む必要はありません。console.log()

これを試してみてください：セレクタの

$(document).ready(function() { 
 
    $('.open-model').click(function(e) { 
 
    e.preventDefault(); 
 
    
 
    var h3title = $(this).prev('.parent').find('.title').text(); 
 
    console.log(h3title); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <h3 class="title">Title1</h3> 
 
</div> 
 
<div class="open-model">Open model</div> 
 

 
<div class="parent"> 
 
    <h3 class="title">Title2</h3> 
 
</div> 
 
<div class="open-model">Open model</div>

Answer 3

1. 綴りではなく.find()

   $('.open-model').click(function(e) {// fix selector 
    
       var h3title = $(this).prev('.parent').find('.title').html();//use prev() 
    
       console.log(h3title); 
    
   
    
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <div class="parent"> 
    
       <h3 class="title">Title1</h3> 
    
   </div> 
    
   <div class="open-model">Open model</div> 
    
   
    
   <div class="parent"> 
    
       <h3 class="title">Title2</h3> 
    
   </div> 
    
   <div class="open-model">Open model</div>

   のクリック
2. 使用.prev()に間違っています0

Answer 4

例で

$(document).ready(function(){ 
     $('.open-modal').click(function(e){ 
      e.preventDefault(); 
      var h3title = $(this).prev().find('.title').text(); 
      console.log('h3title'); 
     }); 
    }); 

Answer 5

に変更し、それを私たちは、以前のDOM要素を取得し、我々はその子要素の内部テキストを取得したい構造で見ることができるようにしているの下に。

$('.open-model').on('click', function(){ 
 
    console.log($(this).prev().children().text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <h3 class="title">Title1</h3> 
 
</div> 
 
<div class="open-model">Open model</div> 
 

 
<div class="parent"> 
 
    <h3 class="title">Title2</h3> 
 
</div> 
 
<div class="open-model">Open model</div>