0

I added this bit of code to my header.php file:

<script type="text/javascript">
$(document).ready(function() {
    if( $('div').hasClass('icheckbox') && $('div').hasClass('disabled') ) {
        $('div').parent().addClass('hide_empty');
    }
});
</script>

My goal is to add the class .hide_empty to the parent of all div elements that have a class .icheckbox AND a class .disabled, in that order, with no other classes. The parent of these div elements is a li element in all cases.

I checked many answers to related questions and tried many variations, but whatever cariation I use, the class .hide_empty is never added to the parent li element.

What am I doing wrong here?

Thanks to the input of both @Andrea and @dhirenpatel22 I came up with the following working code:

In my footer.php I added:

<?php 
    function hide_empty_terms() { ?>
        <script type="text/javascript">
            jQuery(window).load(function() {
                jQuery(".icheckbox.disabled").each(function() {
                    jQuery(this).parent('li').addClass('hide_empty');
                });
            });
        </script>
    <?php }
    add_action('wp_footer', 'hide_empty_terms');
?>

right before <?php wp_footer(); ?>. This actually adds the class hide_empty to the parent li element of <div class="icheckbox disabled">.

Improve this question

3 Answers 3

Reset to default
2

So, the elements should be changed into <div class="icheckbox disabled hide_empty" style="">

that's different from the goal stated in the question where you say you want to add class "hide_empty" to the parent <li> of the <div class="icheckbox">. The code posted by @dhirenpatel22 should work to add class hide_empty to the li element, of course if the element you want to add class to is the same div it should be $(this).addClass('hide_empty')

Also note that hasClass() will return true even if the element has more classes. To find only the divs with both and exclusively icheckbox + disabled I guess the best way is: 

$(".icheckbox, .disabled").each(function(){
  $(this).parent('li').addClass('hide_empty');
  // or $(this).addClass('hide_empty') 
  //if it's the <div> instead of <li> you want to apply the rule
})
Improve this answer
9
  • You're quite right @Andrea. I stand corrected. The HTML should be changed into <li class="term_1675 hide_empty">, <li class="term_1676 hide_empty">, etc. Thanks for your suggestion though. I'll give it a try.
    – Guido
    Commented Jul 30, 2018 at 22:31
  • Thanks again @dhirenpatel22 and @Andrea, but it still doesn't work. I put an alert in, just to see if anything is processed at all, but the alert doesn't show. I'm starting to think something's wrong with the placement of the code. I put mine in header.php, just before the </head> tag. Is that correct?
    – Guido
    Commented Jul 31, 2018 at 10:47
  • Did you look at the js console? You may have js error.. Replace the instances of $ with jQuery
    – Andrea Somovigo
    Commented Jul 31, 2018 at 10:54
  • I had looked at the js console before and still no warnings or errors. Replacing $ with jQuery didn't change anything, I'm afraid. I hope you have another suggestion. If not, well, I guess it's a quirk somewhere that I need to smooth out at some point...
    – Guido
    Commented Jul 31, 2018 at 11:44
  • are you on the right file? in the html source can you see yor code?
    – Andrea Somovigo
    Commented Jul 31, 2018 at 11:50
0

I have just updated your code...

<script type="text/javascript">
$(document).ready(function() {
    $('div').each(function() {
        if( $(this).hasClass('icheckbox') && $(this).hasClass('disabled') ) {
            $(this).parent().addClass('hide_empty');
        }
    });
});
</script>

Hope this works..!!

Improve this answer
3
  • Thanks @dhirenpatel22, but I'm afraid it still doesn't work. Should I use $(document).ready(function() or rather $(window).load(function() for the function to load after the DOM is loaded?
    – Guido
    Commented Jul 30, 2018 at 17:08
  • It would be good if you share the complete code here or provide the reference URL (if its ok with you), so that can provide a precise solution to your problem.
    – dhirenpatel22
    Commented Jul 30, 2018 at 17:13
  • Hi @dhirenpatel22, I just added the html code in a comment to my original question.
    – Guido
    Commented Jul 30, 2018 at 20:01
0

This is the html code I aim to change:

<div class="html_list"> <ul class="list_checkbox"> <li class="term_1675 "> <div class="icheckbox disabled" style=""> <input type="checkbox" id="term_1675" class="checkbox_term checkbox_term_1675" data-tax="product_tag" name="advies" data-term-id="1675" value="1675" style=""> <ins class="iCheck-helper" style=""></ins> </div> ...some more code... </li> <li class="term_1676 "> <div class="icheckbox disabled" style=""> <input type="checkbox" id="term_1676" class="checkbox_term checkbox_term_1676" data-tax="product_tag" name="coaching" data-term-id="1676" value="1676" style=""> <ins class="iCheck-helper" style=""></ins> </div> ...some more code... </li> ...etc... </ul> </div>

So, the <div> elements should be changed into <div class="icheckbox disabled hide_empty" style="">

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.