jQuery: add div if it does not exist?

I know how to addClass if it does not exist e.g.

$("ul:not([class~='bbox'])").addClass("bbox");

Or

if(!$("ul").hasClass("class-name")){
    $("ul").addClass("bbox");
 }

But how do I check if ul element itself with a class already exist and if ul doesn't exist then add one?

1 answer

  • answered 2018-01-11 21:05 j08691

    You check the length.

    Ex:

    if( $("ul.class-name").length ){
        //do something
    }
    

    If there are no matches, length will be zero and thus false (or falsy), otherwise it will be true (or truthy)

  • destroy or reset image croppie

    I have two different section for uploading image in the website, one of them for banner and another one for profile picture. They have different dimension as well. uploading image works in a overlay page.

    I added image croppie in my server and according in my codes, when the user click on the banner image, it's automatically set its dimension to image croppie and when the user click on the profile picture, it set the profile picture size to image croppie.

    All i want is, when user upload a photo and then cancel it, everything will be gone. Now if user upload a photo in banner photo, and then cancel it, the photo is still available when we come back to the overlay of uploading image. Also if user click on the profile picture, it shows the photo of the banner with its dimension again.

    i want that when user clicks on cancel button (which is .fa-times in my codes), everything about the uploaded image and its dimension will be removed. Then if user click on the another section (profile photo or banner), the user see a fresh page with the right dimension.

    Here is my codes, this is the codes, when user clicks on the browse button to select the image for uploading.

    this.body.addClass("overlay--active");
    var imageBody = $(e.target).closest(".icon");
    this.height = imageBody.attr("data-height");
    this.width = imageBody.attr("data-width");
    
    
    var crop = new Croppie(document.getElementById('js-image-editor'), {
        enableExif: true,
        showZoomer: true,
        viewport: { width: this.width, height: this.height, type: 'square'},
        boundary: { width: this.width, height: this.height}
    });
    
        function readFile(input) {
          if (input.files && input.files[0]) {
                  var reader = new FileReader();
    
                  reader.onload = function (e) {
              $('.section').addClass('ready');
                    // crop.croppie('bind', {
                    crop.bind({
                      url: e.target.result
                    }).then(function(){
                      console.log('jQuery bind complete');
                    });
    
                  }
    
                  reader.readAsDataURL(input.files[0]);
              }
              else {
                swal("Sorry - you're browser doesn't support the FileReader API");
            }
        }
    
    
        $('.button-upload-image').on('change', function () { readFile(this); });
    
    
    
        $('.fa-save').on('click', function (ev) {
           crop.result ({
            type: 'canvas',
            size: 'viewport'
          }).then(function () {
            console.log('upload image complete');
          });
        });
    
    
        $(".fa-times").click(function() {
          $('.section').removeClass('ready');
          crop.bind ({
            url: ''
          }).then(function(){
            console.log('reset complete');
          });
        })
    

    as you can see in the last block, i tried to reset image croppie, but it's not working. Every time the error of "Croppie: Can't initialize croppie more than once" come up.

    Anyone can help me on this? i really appreciate for your help in advance.

  • Failed to execute 'getComputedStyle' on 'Window' - Using Materialize

    Well, I'm having an error in my project, it was working normally, and I can not remember after which change started to give the following error when clicking on a collapsible, materializecss

    ERROR: materialize.min.js:6 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

    HTML: http://dontpad.com/materialize-error