代码之家 › 专栏 › 技术社区 › Lu cas

在元素父JQuery外单击div时如何获取元素子元素中的值

getvalue children get jquery javascript

0

Lu cas · 技术社区 · 7 年前

div.open-model 将显示一个模型的值是 h3.title h3.标题 每列

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

5 回复 | 直到 7 年前

1

Suresh Atta 7 年前

尝试 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();

  });
});

2

1

Rory McCrossan 7 年前

元素上的类是 open-model open_modal 不正确
find() prev().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>

3

0

guradio 7 年前

单击时选择器拼写错误

使用


     .prev()


     .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>

4

0

Hannan 7 年前

将其更改为

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

5

0

Rupali Pemare 7 年前

$('.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>