使用document.getElementsByTagName遍歷dom元素，傳遞元素作爲jquery對象

Question

我需要的是遍歷某個開始元素的dom，然後遍歷開始元素下的所有元素。

這是我到目前爲止所做的。

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

我之所以需要遍歷從一些開始元素的DOM是因爲我們的團隊最近得到了實現了字體大小調整的請求;然而，我們開發的網站靜態與字體大小在許多不同的地方使用像素。我意識到更簡單的方法是重構現有的代碼，在頁面的根部設置一個靜態字體大小，並在其中使用em的百分比，這樣，如果業務所有者想要在頁面上調整大小，我們所要做的就是在一個地方增加字體大小。這個重構需要很多小時，而且我的任務是使用最少的工時。

所以，後來，我有一個回調像這樣定義，

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

使用這種原料的JavaScript的工作，但我遇到麻煩的字體大小，如果它是一個CSS類中聲明。

我知道，jQuery有一個CSS屬性，如果我有一個jQuery對象，我能做到$（本）的.css（....），因此，

當我打電話callBackFunc（項[I] ），如何將項[i]轉換爲jquery對象，以便在我的回調函數中，我可以執行node.css（......）？

我想我可以做$（items [i] .id），也許這將是最簡單的。

即使在css類中聲明該字體大小並且該css類附加到該元素，是否有使用javascript更容易確定字體大小的方法？

Answer 1

前言：我認爲你最好能夠妥善解決問題。你現在可以通過一個捷徑來節省一兩個小時，但是從長遠來看，這很可能會讓你付出代價。

但重新您的實際問題：

我如何轉換的項目[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); 
    } 

});