Check width element by JS

Question

I'm working on menu dropdown by HTML and CSS. I have a issue with checking sub-menu's width. I have a menu like this

When we point to the element, it will show the dropdown menu like this or like this

The sub-menu is a dynamic menu. It has same style, same css name, but depends on data so that sub menu can be small or large. So I would like to check the sub-menu width, if any sub-menu(s) have width larger than 200px -> add one more css class in sub-menu (the others < 200px, must not be added)

My idea is using JS for checking sub-menu element's width. But I'm a newbie on it. I tried with

<script>
  if ($('.sub-dropdown').width() > 200) {
       $('.sub-dropdown').addClass('float-right');
  }
</script>

But of course, it added to all sub-menu, even they are less than 200px :(

Can anyone have the experience with this issue? Please give me an solution on that.

Many thanks.

Answer 1

I'll tell you why your all sub-dropdown will have class float-rigth. Only if your one sub-dropdown box's width is bigger then 200, your if judgment will be true ,so the code come in to $('.sub-dropdown').addClass('float-right');.this code will add all your box's with class float-right which box's class is sub-dropdown.

You should change your code like this

$('.sub-dropdown').each(function(index,ele){
    if($(ele).width()>200){
        $(ele).addClass('float-right');
    }
});