当我想要找到一个对象的孩子时,我可以使用children();当我想在另一个对象中找到一个对象时,不一定是小孩,可以使用find().如果我想找一个父母,我使用parent(),但是如果我想找到一个先行者,不知道是否是父母祖父母,祖父母,我该怎么办？
我会给你一个例子：我正在构建一个应用于一些“输入：文本”的插件.
最后,我需要做一些事情来保持他们的形式.但有时,文本框将直接在表单中,或者它们可以在无序列表或表内.
我能否以一般的方式参考表格？
解决方法
您可以使用jQuery的最近()方法：
$('input:text').change(
function(){
var ancestorFormElement = $(this).closest('form');
// do stuff.
});
$('input:text').change(function() {
var ancestorFormElement = $(this).closest('form');
ancestorFormElement.addClass('hasInputChanged');
});
form {
border: 2px solid #000;
padding: 1em;
}
form.hasInputChanged {
border-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<legend>Simple demo</legend>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</fieldset>
</form>
外部JS Fiddle demo,用于实验或开发.
或者,您可以简单地使用将< form>元素与其后代的形式元素(< input>,< textarea>,< select>等)：
$('input:text').change(function() {
var ancestorFormElement = this.form;
// because 'this.form' returns a DOM node,it
// must be converted to a jQuery object in
// order to utilise jQuery methods:
$(ancestorFormElement).addClass('hasInputChanged');
});
$('input:text').change(function() {
var ancestorFormElement = this.form;
$(ancestorFormElement).addClass('hasInputChanged');
});
form {
border: 2px solid #000;
padding: 1em;
}
form.hasInputChanged {
border-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<legend>Simple demo</legend>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</fieldset>
</form>
外部JS Fiddle demo,用于实验或开发.
此外,因为我强烈怀疑你想要改变 – 无论如何 – 要恢复“改变”,我建议采取以下方法：
$('input:text').change(function() {
var ancestorFormElement = this.form;
// here we use the 'toggleClass(<class-name>,<switch>)'
// method; where the 'switch' returns a Boolean true/false
// if it evaluates to true then the class-name is added
// and if it evaluates to false then the class-name is
// removed:
$(ancestorFormElement).toggleClass('hasInputChanged',this.value !== this.defaultValue);
});
$('input:text').change(function() {
var ancestorFormElement = this.form;
$(ancestorFormElement).toggleClass('hasInputChanged',this.value !== this.defaultValue);
});
form {
border: 2px solid #000;
padding: 1em;
}
form.hasInputChanged {
border-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<legend>Simple demo</legend>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</fieldset>
</form>
外部JS Fiddle demo,完全可以将更改事件处理程序委派给< form>元素本身,使用on()：
$('form').on('change',function(e) {
// here 'e' is the event-object passed to the
// event-handling function; 'e.target' is the
// element that received the initiating event:
var changedEl = e.target;
$(this).toggleClass('hasInputChanged',changedEl.value !== changedEl.defaultValue);
});
$('form').on('change',function(e) {
var changedEl = e.target;
$(this).toggleClass('hasInputChanged',changedEl.value !== changedEl.defaultValue);
});
form {
border: 2px solid #000;
padding: 1em;
}
form.hasInputChanged {
border-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<legend>Simple demo</legend>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</fieldset>
</form>
外部JS Fiddle demo,用于实验或开发.
也可以将选择器传递给on()方法来指定应该启动给定事件的元素(这里是“change”事件)到
触发与祖先绑定的事件处理：
// here we pass the selector,'input[type=text]' to the
// method,which restricts the event-handling to only
// those events originating with <input> elements whose
// 'type' attribute is equal to 'text':
$('form').on('change','input[type=text]',function(e) {
$(this).toggleClass('hasInputChanged',function(e) {
var ancestorFormElement = this.form;
$(ancestorFormElement).toggleClass('hasInputChanged',this.value !== this.defaultValue);
});
form {
border: 2px solid #000;
padding: 1em;
}
form.hasInputChanged {
border-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<legend>Simple demo</legend>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</fieldset>
</form>
外部JS Fiddle demo,用于实验或开发.
最后,一个纯粹的JavaScript手段完成了同样的行为：
// defining a named function to handle the
// event-handling,the 'event' argument is
// passed automagically from the
// addEventListener() method (below):
function changeHandler(event) {
// 'this' is the element to which
// event-handler was bound (again
// automagically passed from
// addEventListener()):
var form = this,changed = event.target;
// here we use the Element.classList API; which
// works much as toggleClass() does,adding the
// supplied class-name if the switch that follows
// evaluates to true,removes it if the switch
// evaluates to false:
form.classList.toggle('hasInputChanged',changed.value !== changed.defaultValue);
}
// retrieving the <form> element using
// document.querySelector(),which returns
// the first element in the document that
// matches the CSS selector passed to the
// function:
var formElement = document.querySelector('form');
// using addEventListener to bind the named
// function (changeHandler) as the event-
// handler for the 'change' event:
formElement.addEventListener('change',changeHandler);
function changeHandler(event) {
var form = this,changed = event.target;
form.classList.toggle('hasInputChanged',changed.value !== changed.defaultValue);
}
var formElement = document.querySelector('form');
formElement.addEventListener('change',changeHandler);
form {
border: 2px solid #000;
padding: 1em;
}
form.hasInputChanged {
border-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<legend>Simple demo</legend>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</fieldset>
</form>
外部JS Fiddle demo,用于实验或开发.
参考文献：
> CSS：
> JavaScript：
> document.querySelector().
> Element.classList.
> EventTarget.addEventListener().
> HTMLInputElement.
> jQuery：
> addClass().
> change().
> closest().
> on().
> toggleClass().
