【jQuery】兄弟要素にclassを付与したいです。

Question

兄弟要素にclassを付与する方法が分からず困っています。
お力をいただけますと幸いです。

やりたいこと

・ウィンドウサイズが560px以下の際に実行
・「.order」の高さが兄弟要素の「.text」よりも大きい、または同じだったら兄弟要素の「.thumb」にclass「name1」を付与したい
・逆に、「.order」の高さが兄弟要素の「.text」よりも低かったら兄弟要素の「.thumb」にclass「name2」を付与したい

html

<div class="menu-lst">
    <div class="menu-lst__item">
        <a class="thumb" href="#"></a>
        <div class="text"></div>
        <div class="order"></div>
    </div>
    <div class="menu-lst__item">
        <a class="thumb" href="#"></a>
        <div class="text"></div>
        <div class="order"></div>
    </div>
    <div class="menu-lst__item">
        <a class="thumb" href="#"></a>
        <div class="text"></div>
        <div class="order"></div>
    </div>
</div>

js

$(window).load(function() {
    var mediaQuery = matchMedia('(max-width: 560px)');
    handle(mediaQuery);
    mediaQuery.addListener(handle);
    function handle(mq) {
        var order = $(".menu-lst__item .order").outerHeight(true);
        var text = $(".menu-lst__item .text").outerHeight(true);
        if (mq.matches) {
            if (order >= text) {
                $('.menu-lst__item .order').nextAll('.menu-lst__item .thumb').addClass("name1");
            } else {
                $('.menu-lst__item .text').nextAll('.menu-lst__item .thumb').addClass("name2");
            }
        } 
    }
});

↓ウィンドウサイズによる条件分岐はにつきましては以下を参考にしました。
https://spyweb.media/2018/01/10/css-media-queries-in-js-matchmedia/

初歩的な質問かもしれませんが、知識不足で分からず困っています。
こちら、お分かりになる方がいらっしゃいましたら、ご教授いただけますと幸いです！

Comments

[yambejp]

同じだったらname1をつけていいのでしょうか？

[harukamaki]

ご指摘してくださってありがとうございます。
値が同じだったらname1を付けても問題ないです。
※質問を直しました。ありがとうございます。

Answer 1

$(window).on('load',function(){
  $('.thumb').each(function(){
    var flg=$(this).siblings('.text').height()<=$(this).siblings('.order').height();
    $(this).toggleClass('name1',flg).toggleClass('name2',!flg)
  });
});