I have a Jquery sibling,parent,closest hierarchy problem

Question

I need to add css to a sibling select element of a span element only if the span element has content.

The html is this:


   
   Not allowed.

This works:

if( $('.rules-error').text().length>0){
   $('.rules-error').siblings().css('background-color','green')
}

but i need it to be specific to that spans sibling select.

But this does not work:

if( $('.rules-error').text().length>0){
    $(this).siblings().css('background-color','green')
}

Carsten Løvbo Andersen · Answer

It's a bit hard to see what code is around your if statement, but in the case of your last code, this does not refer to your .role-error element, so you can do something like this:

$('.rules-error').each(function() {
  if ($(this).text().length > 0) {
    $(this).siblings().css('background-color', 'green')
  }
})

Demo

$('.rules-error').each(function() {
  if ($(this).text().length > 0) {
    $(this).siblings().css('background-color', 'green')
  }
})



  
  Not allowed.

freedomn-m · Answer

The first issue in your code is that $(".rules-error").text() combines all the text from all the .rules-error elements into a single string, so if one has an error, then your code treats it as all have errors.

Clearest option is to loop through each .rules-error and check, which gives you the context in this (code already provided in another answer).

You can make this more succinct by using .filter. If your rules-error spans are always blank, you could use:

$(".rules-error:not(:empty)").siblings().addClass("error")

but whitespace counts as being not-empty, so this will fail for (or a newline if you're html is formatted as such) - so you need to trim this in the filter.

$(".rules-error")
    .filter((_,e) => $(e).html().trim() !== "")
    .siblings()
    .addClass("error")

Note: this is essentially the same as looping, it just pre-loops and the applies the css to all the matching elements at once. I also suggest adding a class for the style rather than using .css() as it will be easier to simply remove the class when you want to clear the errors.

Updated snippet:

//$(".rules-error:not(:empty)").siblings().addClass("error")
$(".rules-error").filter((_,e) => $(e).html().trim() !== "").siblings().addClass("error")

.error { background-color: pink }



  
    
      
      Not allowed.

I have a Jquery sibling,parent,closest hierarchy problem

2 Answers