特定のクラス名のhtmlの順番を変えたいのだが先頭の要素にしか処理が走らない

Question

javascript初心者です宜しくお願い致します。
インデントをしたのですが、プレビューで反映されていなく、見づらく申し訳ございません。

<div id = "id-1">
    <div class="left-img">
        <img src = "sample.com">
    </div>

    <div class = "right-tag">
        <div class="tag">
            <a class = "class-2">クラス2</a>
            <a class = "class-1">クラス1</a>
        </div>

        <div class="tag">
            <a class = "class-2">クラス2</a>
            <a class = "class-3">クラス3</a>
        </div>

        <div class="tag">
            <a class = "class-2">クラス2</a>
            <a class = "class-1">クラス1</a>
        </div>

    </div>
</div>

特定のクラス名を持っているhtmlの順番を変えたくて以下のような記述をしました。

var child = document.getElementById('id-1').getElementByClassName('class-1');
var parent = $(child).parent();

if($(child).hasClass('class-1')){
    var first = $(parent).child().eq(0).prop('outerHTML');
    var second = $(parent).child().eq(1).prop('outerHTML');
    $(parent).eq(0).html(second+first);
}

すべての[class-1]をクラス名にもつ要素に処理を適応させたいのですが、この記述だと、先頭の[class-1]をクラス名に持つ、htmlにしか処理が適応されませんでした。
そこでeachメソッドを使ってすべての要素に、処理を適応させようとしたところ、処理が走らなくなってしまいました。

var child = document.getElementById('id-1').getElementByClassName('class-1');
var parent = $(child).parent();

$(parent).each(function(){
    if($(child).hasClass('class-1')){
        var first = $(parent).child().eq(0).prop('outerHTML');
        var second = $(parent).child().eq(1).prop('outerHTML');
        $(parent).eq(0).html(second+first);
    }
});

調べたのですが、原因がわかりません。
コンソールにエラーはでていませんでした。
どなたかご教授いただければ幸いです。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[maturyo]

大変失礼いたしました。
挿入させていただきました。
教えていただきありがとうございます。

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

[maturyo]

かしこまりました。
以後気を付けます。
ご指摘ありがとうございます。

Answer 1

そもそも提示のコードではdocumentGetElementByIdが定義されていません。ブラウザのJavaScriptであれば、document.getElementByIdがありますがそれの書き間違いでしょうか。

【Document.getElementById() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

あと、jQueryで処理するならgetElementById等ではなくjQueryで処理すればよいのでは。

$( '#id-1 .class-1.target' ).each( function() {
  // 中身の処理はparent以外提示されたもののまま（HTMLも目的も提示が無いので）
  var first = $( this ).parent().child().eq(0).prop('outerHTML');
  var second = $( this ).parent().child().eq(1).prop('outerHTML');
  $( this ).parent().eq(0).html( second + first );
} );

Comments

[maturyo]

申し訳ございません。
急ぎだったもので誤った記述まみれでした。
大変失礼いたしました。

[kei344]

To: maturyoさん
質問文が書き換わっていますが、「jQueryで処理するならgetElementById等ではなくjQueryで処理すればよいのでは」という回答で解決できると思うので、試してみてください。

To: 後から見る方
質問編集前の回答です。

【質問編集履歴｜teratail（テラテイル）】
https://teratail.com/questions/history-questions/257670