Set class on prev() if this is empty (jQuery)

Question

I'm trying to addClass on prev() if $(this) is empty or removeClass if itsn't, but can't make it work:

function sfVide(){
    var noentry = false;
    $('.sf').each(function(){
        if($(this).val().trim()==""){
            noentry = true;
            $(this).prev().addClass("test");
        }
      else {
    $(this).prev().removeClass("test");
        }
    });
    return noentry;
}

HTML

<a class="sf--trigger">Subs</a>
<div class="sf"></div>

Live codepen for testing: https://codepen.io/mSyx/pen/MWayKQx

When you say it's not working... have you looked in the DOM inspector to see if the class is being added/removed? Also, your `return` statement won't do much. — Mitya, Apr 16 '20 at 18:38
[`.val()`](https://api.jquery.com/val/) gets the value of form elements. — Heretic Monkey, Apr 16 '20 at 18:38
I really thought the issue was in my writing and not the .val() thing itself. Thank you. — mSyx, Apr 16 '20 at 18:43

score 1 · Accepted Answer · answered Apr 16 '20 at 18:40

.val() is for use with input elements. In your example, you should probably use text() (you could also use html()):

$('.sf').each(function(){
    if( $(this).text().trim() == "" )
    {
        noentry = true;
        $(this).prev().addClass("test");
    }
    else 
    {
      $(this).prev().removeClass("test");
    }
});

.btn {
  background: blue;
  display: block;
  height: 100px;
  width: 100px;
}

.btn.test {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="btn"></a>
<div class="sf"></div>

Set class on prev() if this is empty (jQuery)

1 Answers1