使用document.getElementsByTagName迭代dom元素，将元素作为jquery对象传递

我需要的是在某个start元素处迭代dom，然后遍历start元素下面的所有元素。

这是我到目前为止所做的。

function iterDomFromStartElem = function(startElem, callBackFunc) { if (startElem !== null) { var items = startElem.getElementsByTagName("*"); for (var i = 0; i < items.length; i++) { callBackFunc(items[i]); } } } 

我需要从一些start元素迭代dom的原因是因为我们的团队最近收到了实现字体大小调整的请求; 但是，我们使用像素在很多不同的地方静态开发了font-size字段。 我意识到更简单的方法是重构现有代码，在页面根目录设置静态字体大小，并在其他地方使用em / percentages，这样如果业务所有者想要对页面进行resize控制，我们所要做的就是在一个地方增加字体大小。 这个重构需要很多小时，而且我使用最少的工时来完成这项任务。

那么，我有一个像这样定义的回调，

 function resizeFont(startElem, scale) { iterDomFromStartElem(startElem, function(node) { // get current size of node, apply scale, increase font size } } 

使用这个原始的JavaScript可以工作，但如果它在css类中声明，我将无法获得font-size。

我知道jquery有一个css属性，如果我有一个jquery对象，我可以做$（this）.css（….），所以，

当我调用callBackFunc（items [i]）时，如何将items [i]转换为jquery对象，以便在我的回调函数中，我可以做node.css（……）？

我想我可以做$（items [i] .id），也许这是最简单的。

有没有更简单的方法用javascript来确定字体大小，即使在css类中声明了该字体大小并且css类附加到该元素？

Answer 1

前言：我认为你最好妥善解决问题。 你现在可以通过快捷方式节省一两个小时，但从长远来看可能会花费你。

但重新提出你的实际问题：

如何将items [i]转换为jquery对象，以便在我的回调函数中，我可以做node.css（……）？

如果将原始DOM对象传递给$() ，jQuery将返回一个包装器。 您无需通过身份证。

您还可以为给定起点的所有后代元素获取jQuery实例，如下所示：

 var x = $("#starting_point *"); 

…虽然如果你然后循环通过它仍然会创建很多临时对象，如下所示：

 $("#starting_point *").each(function() { // Here, `this` is the raw DOM element }); 

这是一个使用jQuery循环给定起始点下的所有元素的示例，在这种情况下显示其标记和id （如果有）并将它们变为蓝色（ 实时副本 ）：

 $("#start *").each(function() { display(this.tagName + "#" + (this.id || "?")); $(this).css("color", "blue"); }); 

注意我说下 。 如果您还想包含#start ，则选择器将更改为#start, #start * 。

这是一个完整的例子，用于增加以（包括）给定起点开头的元素的字体大小，其中字体大小由内联和样式表样式（ 实时副本 ）进行各种设置：

CSS：

 .x13 { font-size: 13px; } .x17 { font-size: 17px; } .x20 { font-size: 20px; } 

HTML：

  
 This is in 13px 
This is in 15px and this is 17px
 
 
10px 8px five  
 
  

JavaScript的：

 jQuery(function($) { $("#btnBigger").click(function() { $("#start, #start *").each(function() { var $this = $(this), fontSize = parseInt($this.css("font-size"), 10); display("fontSize = " + fontSize); $this.css("font-size", (fontSize + 2) + "px"); }); }); function display(msg) { $("
").html(msg).appendTo(document.body); } });