Question 36275 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Setting div class width to the widest div is not updating – Jquery

I have a list of elements that content is generated with php from a database (I can multiply their values). I want them to have the width of the widest element – it should be updated on page load and click on select tag (multiplying the values). The script works on page load, but it’s not updating the width when I’m clicking the select tag. Also, when the widest element shrinks, the width is not shrinking as it should, but staying the same as before.

<head>
  <script src="script.js" defer></script>
</head>

<select class="multiply_ing">
    <option value="0.5">0.5x</option>
    <option value="1" selected>1x</option>
    <option value="5">5x</option>
    <option value="10">10x</option>
</select>

// it looks like this - data-val generated from php <p class='ing_wght' data-val='$ing_weight'></p>
<p class='ing_wght' data-val='33'></p>
<p class='ing_wght' data-val='54'></p>
<p class='ing_wght' data-val='7312'></p>
<p class='ing_wght' data-val='6'></p>

// js/jquery code for multiplying is in the same file (above this one) as the script to change the width

$(".multiply_ing").on("click", function(){
    ingWidth();
});
$(window).on("load", function(){
    ingWidth();
});

function ingWidth(){
    let maxWidth = 0;
    let widestIngWght = null;
    let ingWght;
    
    $(".ing_wght").each(function(){
       ingWght = $(this);
       if(ingWght.width() > maxWidth){
            maxWidth = ingWght.width();
            widestIngWght = ingWght; 
       }
    });

    $(".ing_wght").css("width", maxWidth);
    console.log(maxWidth);
}

How can I fix these problems?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I found the solution. I had to add an if statement that removes the width from the class $(this) if it's wider or equal to previously defined max width.

    $(".multiply_ing").on("click", function(){
    ingWidth();
});

$(window).on("load", function(){
    ingWidth();
});

function ingWidth(){
    let maxWidth = 0;
    let widestIngWght = null;
    let ingWght;
    
    $(".ing_wght").each(function(){
        
        ingWght = $(this);
        
        if(ingWght.width() >= maxWidth){
            ingWght.width("");
        }

        if(ingWght.width() > maxWidth){
            maxWidth = ingWght.width();
            widestIngWght = ingWght; 
        }
    });

    $(".ing_wght").css("width", maxWidth);
}

    Maybe it will help someone in the future.


  2. 0

    Change:

    $(".multiply_ing").on("click", function(){
    ingWidth();
});

    To:

    $(document).on("change", ".multiply_ing", function(){
    ingWidth();
});

    This should work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search