使用document.getElementsByTagName迭代dom元素，将元素作为jquery对象传递 [英] Iterate over dom elements using document.getElementsByTagName, pass element as jquery object

问题描述

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

What I need is to iterate over the dom at some start element and then go through all elements below the start element.

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

Here is what I was doing so far.

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

The reason why I need to iterate over the dom from some start element is because our team recently got a request to implement font resizing; however, we developed are site statically with font-size in many different places using pixels. I realize that the easier approach would be to refactor the existing code, set a static font size at the root of the page, and use em's/percentages else where, so that if the business owner wanted to have a resize control on the pages, all we would have to do is increase the font-size in one spot. This refactor would require many hours, and i have been tasked with this using the least amount of man hours.

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

So, then, I have a call back defined like so,

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

使用这个原始的javascript会起作用，但是如果它在css类中声明的话，我很难获得font-size。

Using this raw javascript would work but i'm having trouble getting font-size if its declared inside a css class.

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

I know that jquery has a css property and if I had a jquery object I could do $(this).css(....), so,

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

when I call callBackFunc(items[i]), how can I convert the items[i] into a jquery object so that in my call back function, I can do node.css(......)?

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

I guess I could do $(items[i].id), perhaps that would be the simplest.

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

Is there an easier way with javascript to determine the font size even if that font size is declared in a css class and that css class is attached to the element?

推荐答案

前言：我认为你最好正确解决问题。你现在可以通过快捷方式节省一两个小时，但这可能会让你长期付出代价。

Preface: I think you're better off fixing the problem properly. You might save an hour or two now by taking a shortcut, but it's likely to cost you in the long term.

但请回答你的实际问题：

But re your actual question:

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

how can I convert the items[i] into a jquery object so that in my call back function, I can do node.css(......)?

如果将原始DOM对象传递给 $（） ，jQuery将返回一个包装器。您不必通过ID。

If you pass a raw DOM object into $(), jQuery will return a wrapper around it. You don't have to go via the ID.

您还可以获取给定起点的所有后代元素的jQuery实例，像这样：

You can also get a jQuery instance for all descendant elements of a given starting point, like this:

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

...如果你再循环通过，你仍然会创建很多临时对象它，像这样：

...although you'd still end up creating a lot of temporary objects if you then looped through it, like this:

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

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

Here's an example of looping all elements under a given starting point with jQuery, in this case showing their tag and id (if any) and turning them blue (live copy):

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

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

Note I said under. If you also want to include #start, the selector changes to #start, #start *.

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

Here's a complete example of increasing the font size of elements starting with (and including) a given start point, where the font size is variously set by inline and stylesheet styles (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：

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对象传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！