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の/パーセントを使用するという簡単な方法があることを認識しています。そのため、ビジネスオーナーがページのサイズを変更したい場合、私たちがしなければならないことは、フォントサイズを1つの場所で増やすことだけです。このリファクタリングには多くの時間がかかり、最低限の人数でこの作業を任されています。

だから、それから、私は働くだろう、この生のJavaScriptを使用して、

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

コールバックそれほどのように定義していますが、私はトラブルのCSSクラス内で宣言した場合、フォントサイズを取得することです。

私はcallBackFunc（項目[i]を呼び出すときに私はjQueryのCSSプロパティを持っていると私はjQueryオブジェクトを持っていた場合、私は$（この）の.css（...）を行うことができることを知っているので、

）、どのように私はjqueryオブジェクトに私のコールバック関数では、私はnode.css（......）することができますitems [i]を変換することができますか？

私は$（items [i] .id）を行うことができたと思いますが、おそらくそれが最も簡単でしょう。

フォントサイズがcssクラスで宣言されていて、そのCSSクラスが要素にアタッチされていても、javascriptで簡単にフォントサイズを判断できますか？

Answer 1

序文：問題を適切に解決する方がよいと思います。ショートカットを取って1時間か2時間節約できるかもしれませんが、長期的にはあなたの費用がかかる可能性があります。

しかし、あなたの実際の質問再：私のコールバック関数の中で、私は（node.cssを行うことができるように

は、どのように私は...... jQueryオブジェクトに項目[I]に変換することができます）？

raw DOMオブジェクトを$()に渡すと、jQueryはその周りにラッパーを返します。あなたはIDを経由する必要はありません。

また、このような特定の出発点のすべて子孫要素のためのjQueryのインスタンスを取得することができます。

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

を...あなたはまだあなたがそれを介してループしている場合、このように、一時的なオブジェクトの多くを作成してしまうと思いますが、：ここではjQueryを使って与えられた出発点の下にあるすべての要素をループの例は、自分を示す。この場合には、だ

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

タグと 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); 
    } 

});