Question

当我想找到一个物体的孩子时，我可以使用children();当我想在另一个对象中找到一个对象时，不一定是它的孩子，我可以使用find()。如果我想找一个父母，我会使用parent()，但如果我想找到一个先行者，不知道它是否是父祖父母，曾祖父母，我该怎么办呢？

我将举一个例子：我正在构建一个适用于某些'input：text'的插件。

最后，我需要对包含它们的表单做一些事情。但有时，文本框将直接位于表单内部，或者它们可以位于无序列表内或表内。

我能否以一般方式参考表格？

Answer 1

您可以使用jQuery的closest()方法：

$('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>等相关联的DOM方法：

$('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，用于实验或开发。

此外，完全可以使用change将<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', changedEl.value !== changedEl.defaultValue);
});

$('form').on('change', 'input[type=text]', 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：
- Attribute selectors。
JavaScript的：
- document.querySelector()。
- Element.classList。
- EventTarget.addEventListener()。
- HTMLInputElement。
jQuery的：
- addClass()。
- change()。
- closest()。
- on()。
- toggleClass()。

Answer 2

我不完全确定你的问题是什么，因为它不是很清楚。

我认为您可能正在寻找jQuery parents()函数。

示例：

<table>
    <tr>
        <td id="content"></td>
    </tr>
</table>

$("#content").parents("table")应该获得<table>元素。

Answer 3

查看http://api.jquery.com/parents/和http://api.jquery.com/parentsUntil/

jQuery找到了先行者？

3 个答案: