jQuery 上下文选择

Question

如果我这样做

var domElement = $("#id");

返回的元素是一个div标签，

我怎样才能做类似的事情

domElement.$('div a:nth-child(3)').after(somehtml);

这是一个示例，我想在“domElement”div 下的第三个链接之后添加一些 HTML。

以上似乎不起作用。我有很多例子，其中我已经从整个页面 HTML 中选择了某个元素，然后我想在该元素的“上下文”内工作。

在 90% 的情况下，我希望继续从页面中先前选择的 DOM 元素进行 jQuery 选择、遍历和操作，而不是像 $(..) 那样从整个页面进行选择。

Answer 1

您想要.find() : http://api.jquery.com/find/

var domElement = $("#id");
domElement.find('div a:nth-child(3)').after(somehtml);

如果您打算将其与 domElement 上的多个子选择器链接起来，结束每次使用 .find()与 .end() :

$("#id")
  .find('div')
    .click(function() { alert("#id div"); })
    .find('a.my-class1')
      .click(function() { alert("#id div a.clickable"); })
      .end() // stop working with 'a.my-class1'
    .find('a.my-class2')
      .click(function() { alert("#id div a.my-class2"); }) 
      .end() // stop working with 'a.my-class2'
    .end() // stop working with 'div'
  .click(function() { alert("#id"); });

从概念上讲，您可以使用 .find() 深入 DOM，并使用 .end() 向上返回 DOM。从技术上讲，“降序”和“升序”是不正确的，因为您也可以使用 .parent() 等函数先向上遍历，然后再向下遍历。或.closest() ，两者都可以用 .end() 终止返回到原始选择器:

$("#id")
  .parent()
    .click(function() { alert("I'm #id's parent!"); })
    .end()
  .click(function() { alert ("back to #id"); });