Question

我需要的是在某个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 /百分比，这样如果业务所有者想要对页面进行调整大小控制，我们所要做的就是在一个地方增加字体大小。这个重构需要花费很多时间，而且我使用最少的工时来完成这项任务。

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

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（如果有）并将其变为蓝色（live copy）：

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

注意我在下面说。如果您还想加入#start，则选择器会更改为#start, #start *。

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

CSS：

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

HTML：

<input type="button" id="btnBigger" value="Bigger"> <div id="start" class="x13"> This is in 13px <p style="font-size: 15px">This is in 15px <span class="x17">and this is 17px</span></p> <ul> <li id="the_list_item" style="10px">10px <strong style="font-size: 8px">8px <em class="x20">five</em> </strong> </li> </ul> </div>

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) { $("<p>").html(msg).appendTo(document.body); } });

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

1 个答案: