CODEWITHSUNDEEP
jquerywordpressshow-hide
tfer77
tfer77

Reputation: 826

jQuery hide not working correctly

My question is two-fold first, the below code involves two classes .fbs and .tws if I remove the .fbs script the tws sript works and vice versa but they do not work together. I'm working within the wordpress loop, my html/php looks like this: (there's obviously more but this is the part with the issue)

HTML:

<div class="social-team-list">
<ul>
<?php echo '<li class="fbs'.$i.'">'?><a href="<?php the_field('facebook_url'); ?>">
<img     src="/wp-content/images/fb-team.png"></a></li>
<?php echo '<li class="tws'.$i.'">'?><a href="<?php the_field('twitter_url'); ?>">
<img   src="/wp-content/images/tw-team.png"></a></li>
</ul>
</div>

the output looks like this:

<div class="social-team-list">
<ul>
<li class="fbs1">
<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a>
</li>
<li class="tws1">
<a href="https://twitter.com/whatever"><img src="/wp-content/images/tw-team.png"></a>
</li>
</ul>
</div>

<div class="social-team-list">
<ul>
<li class="fbs2">
<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a>
</li>
<li class="tws2">
<a href="https://twitter.com/whatever"><img src="/wp-content/images/tw-team.png"></a>
</li>
</ul>
</div>

jQuery:

<script>
 $(document).ready(function(){
  if ($(".fbs1").html().length < 58) {
 $('.fbs1').hide();
 }                                           
 if ($(".fbs2").html().length < 58) {
 $('.fbs2').hide();
 }                                           
 if ($(".fbs3").html().length < 58) {
 $('.fbs3').hide();
  }                                           
 if ($(".fbs4").html().length < 58) {
 $('.fbs4').hide();
  } 
  if ($(".tws1").html().length < 58) {
 $('.tws1').hide();
  }
  if ($(".tws2").html().length < 58) {
 $('.tws2').hide();
  } 
  if ($(".tws3").html().length < 58) {
 $('.tws3').hide();
  } 
  if ($(".tws4").html().length < 58) {
 $('.tws4').hide();
  }                                               
 });
</script>

The second part of my question is, assuming I can get this to work, is there a more efficient way to write this script?

I'm sure I'm doing something wrong as my jquery skills aren't great.

Upvotes: 1

Views: 155

Answers (4)

zigdawgydawg
zigdawgydawg

Reputation: 2046

Here's a more generic solution:

Add the "hide-if-too-long" class to each li. For example:

<li class="fbs1 hide-if-too-long">

and

<li class="tws1 hide-if-too-long">

Then, use this script instead:

<script>
    $(document).ready(function(){
        $('.hide-if-too-long').each(function() {
            var el = $(this);
            if (el.html().length < 58) {
                el.hide();
            }
        });                                           
    });
</script>

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

shorter version of your code

$("[class^=fbs],[class^=tws]").each(function() {
    var $this = $(this);
    if ($this.html().length < 58)
       $this.hide();
});

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150070

It doesn't make sense to check the length of the html content of elements that contain only anchors with images. None of your elements has html less than 58 characters long because what you're checking there is the length of this string: '<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a>'.

It also doesn't make sense to assign what look like unique class names to your elements - if they need to be unique use ids. But I don't think they do need to be unique because if you use classes "fbs" and "tws" without numbering them you can do this:

$(".fbs,.tws").each(function() {
    var $this = $(this);
    if ($this.html().length < 58)  // replace your if condition with something
       $this.hide();               // that makes more sense (see my first paragraph)
});

If you really need numbered classes for some reason, just use:

$('[class^="fbs"],[class^="tws"]').each(...

Upvotes: 2

N8FURY
N8FURY

Reputation: 9990

If you do like this $(".fbs1").html().length you ll get answer "92" so it's greater than 58.

So you need change your condition like this.

if ($(".fbs1").html().length > 58)

Upvotes: 0

Related Questions