jquery - 使用父 div 的范围

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

...只会找到与选择器匹配的元素，这些元素是 jQuery 集中.emaildiv 的后代$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以获得更好的理解。