jQuery隐藏无法正常工作

首先，我的问题有两个方面，下面的代码涉及两个类.fbs和.tws，如果我删除.fbs脚本，tws sript可以工作，反之亦然，但它们不能一起工作。我在wordpress循环中工作，我的html/php如下所示： （显然还有更多，但这就是问题所在）

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>

<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>

<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>

输出如下所示：

<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>

<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>

<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>

jQuery:

<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>

<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>

<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>

$（文档）.ready（函数（）{
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（）；
} 
如果（$（“.tws1”）.html（）.length<58）{
$（'.tws1'）.hide（）；
}
如果（$（“.tws2”）.html（）.length<58）{
$（'.tws2'）.hide（）；
} 
if（$（“.tws3”）.html（）.length<58）{
$（'.tws3'）.hide（）；
} 
if（$（“.tws4”）.html（）.length<58）{
$（'.tws4'）.hide（）；
}                                               
});

我问题的第二部分是，假设我可以让它工作，有没有更有效的方法来编写这个脚本

我肯定我做错了什么，因为我的jquery技能不太好。

如果你喜欢这个$（“.fbs1”）.html（）。长度，你会得到答案“92”，所以它大于58

所以你需要像这样改变你的状况

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

---

检查仅包含带有图像的锚的元素的html内容的长度是没有意义的。没有一个元素的html长度小于58个字符，因为您要检查的是此字符串的长度：

'

为元素指定看起来唯一的类名也是没有意义的——如果它们需要是唯一的，请使用ID。但我认为它们不必是唯一的，因为如果使用类“fbs”和“tws”而不进行编号，则可以这样做：

$(".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)
});

---

代码的较短版本

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

$（“[class^=fbs]，[class^=tws]”。每个（函数（）{
var$this=$（this）；
if（$this.html（）.length<58）
$this.hide（）；
});

这里有一个更通用的解决方案：

将“如果太长则隐藏”类添加到每个li。例如：

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

及

然后，改用此脚本：

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

$（文档）.ready（函数（）{
$（'.hide if too long'）。每个（函数（）{
var el=$（本）；
if（el.html（）.length<58）{
el.hide（）；
}
});                                           
});

if（$（“.fbs1”）.html（）.length<58）的作用是什么？您是否正在尝试检查

是否为空？请使用类似

$this.find（“a”）.attr（“href”）==“”

的条件。顺便说一句，

长度为

57个字符。