1. 首页
  2. JAVASCRIPT
  3. jquery wrap

jquery wrap

•JavaScript•阅读 4642
  1. Jquery的wrap的系列的函数可以说是dom元素操作中较为复杂的方法。它提供,wrapAll,wrapInner,wrap三种方法。
  2. wrapAll是把jquery对象中所有元素都包裹在给定的元素最内部元素中(firstChild)。这个包裹之后的元素在jquery对象第一个元素的位置之前。同时会把所有其它位置的元素都去掉。也就是说wrapAll最好是不要多个元素。因为多个元素就不太像wrapAll。
  3. // ***************************************************************
  4. // 一组用于元素标签包裹操作的函数
  5. // 将所有匹配的元素用单个元素包裹起来
  6. // 这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
  7. // 这于 '.wrap()' 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。
  8. wrapAll : function(html) {
  9. if (this[0])
  10. /*
  11. * html的内容：<p>Hello</p> xxxxxx <p>cruel</p> xxxxxxx <p>World</p>。
  12. * $("p").wrapAll("<div><b></b></div>");它调用wrapAll（）。
  13. * 当前jQuery对象(称为A，$("p"))的集合有三个元素：<p>Hello</p>、
  14. * <p>cruel</p>、<p>World</p>
  15. * 开始：jQuery(html, this[0].ownerDocument)把html生成Dom对象
  16. * (通过调用clean)。
  17. * 第一步:复制生成一个jQuery对象(称为B)。B的集合中有一个元素，其为：
  18. * <div><b></b></div>的元素。
  19. * 第二步：把B所有的元素都插在A[0]元素Dom结构之前，A[0]元素没有变，
  20. * 新的DOm:<div><b></b></div><p>Hello</p>
  21. * 第三步：找到B对象中所有元素的最内面的节点，如<div><b></b></div>。
  22. * <b></b>是B中元素最inner Node;
  23. * 第四步：向所有innerNode内部插入A对象的所有元素,得到
  24. * <div><b><p>Hello</p><p>cruel</p><p>World</p></b></div>
  25. *
  26. * 如果是html是selector的话，那就只能是一个元素了。如果是传入的参数是数组，
  27. * jquery对象，那么可能会有多个元素了。
  28. * 比如 $("p").wrapAll($("td"));那就是在所有td元素的最内部节点插入：
  29. * <p>Hello</p><p>cruel</p><p>World</p>
  30. * If child is a reference to an existing node in the document,
  31. * appendChild moves it from its current position to the new position 。
  32. *
  33. * 对元素进行wrap，最好还是只有this[0].因为如果有多个不同的引用，
  34. * 会导致其它地方的元素的move。
  35. */
  36. jQuery(html, this[0].ownerDocument).clone().insertBefore(this[0])
  37. .map(function() {// 找到当前元素的最下层的子节点，map新构成jquery对象。
  38. var elem = this;
  39. while (elem.firstChild)
  40. elem = elem.firstChild;
  41. return elem;
  42. }).append(this);// this指是调用wrapAll的jQuery对象。
  43. returnthis;
  44. },
  45. // 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
  46. wrapInner : function(html) {
  47. /*
  48. * <p>Hello</p><p>cruel</p><p>World</p>
  49. * $("p").wrapInner("<b></b>");
  50. * <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
  51. */
  52. returnthis.each(function() {
  53. // 这里包裹的对象是每个元素的对象的contents()
  54. //每一个元素的所有的子节点，且构建于jquery对象。
  55. jQuery(this).contents().wrapAll(html);
  56. });
  57. },
  58. // 对于当前的jquery对象的每个元素都执行wrapAll(html)
  59. wrap : function(html) {
  60. //与inner不同的是当前的节点。
  61. returnthis.each(function() {// 这里包裹的对象是每个元素的对象
  62. jQuery(this).wrapAll(html);
  63. });
  64. },
  65. 比较三个方法的不同之处。Wrap是对每一个元素都进行wrapAll的操作，也就是把每一个元素都包裹在给定的标签中。wrapInner则是把其每个元素的所有的子元素们进行wrapAll的操作。尽管元素的子元素有多个，但是连续的。在子元素的第一个位置之前插入传入的参数标签，之后把这些连续的子元素全部都移到参数标签的内部。可以看作是一种wrap。但是对于不连续的wrapALL就不一定，一般使用时，建议只要采用wrap和wrapInner就可以了。

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。