Question

在下面的代码中，单击父div的输入文本会被警告。我不清楚“使用父div的范围是什么意思。有人可以解释一下这个范围

HTML

<div class="info">
 <input type="text" placeholder="Email" class="email" value="a@gmail.com" />
 <button class="btn">Click Me</button>
 </div>

 <div class="info">
 <input type="text" placeholder="Email" class="email" value="b@gmail.com" />
 <button class="btn">Click Me</button>
 </div>

 <div class="info">
 <input type="text" placeholder="Email" class="email" value="b@gmail.com" />
 <button class="btn">Click Me</button>
 </div>

 <div class="info">
 <input type="text" placeholder="Email" class="email" value="d@gmail.com" />
 <button class="btn">Click Me</button>
 </div>

Jquery的

$(document).on('click', '.btn', function () {

var $this = $(this).parents('.info');
var email = $('.email', $this).val();

alert(email);

});

Answer 1

您可以使用siblings直接收到电子邮件

$('.btn').on('click', function () {
    var email = $(this).siblings().val();
    alert(email);
});

jsFiddle here

Answer 2

// this will bind click event on buttons

$(document).on('click', '.btn', function () {

// this traverses the ancestry of that button until it finds an element 
// with a class "info", and then caches that jQuery object in $this

var $this = $(this).parents('.info');

// this searches for element with class "email" inside the cached element $this 
// (which is the parent as traversed above)
var email = $('.email', $this).val();

当您使用语法$('selector1', 'selector2')在元素内部找到元素时，您将在“selector2”的范围内找到带有“selector1”的元素。

Answer 3

从您对该问题的评论：

有人给了我这段代码并说var email = $（'。email'，$ this）.val（）; //这一行使用父div作为范围

他们的术语不正确，但他们试图说的是这一行：

var email = $('.email', $this).val();

...只会找到与.email jQuery集合中div的后代匹配的选择器$this的元素，然后获取该元素的值。

该行等同于：

var email = $this.find('.email').val();

...事实上，如果您使用$(selector, $this)，jQuery将转而转而执行$this.find(selector)。

Answer 4

var $this = $(this).parents('.info');
var email = $('.email', $this).val();

email表示具有.email类的元素中具有.info类的元素的值（其中$this元素是单击按钮的父元素）。

希望现在很清楚。

您可以参考jQuery以获得更好的理解。

使用父div的范围

4 个答案: