仅当子 Div 有类时如何编写 jQuery答案

【问题标题】：How to Write jQuery Only if a Child Div has a Class仅当子 Div 有类时如何编写 jQuery
【发布时间】：2012-08-31 12:52:27
【问题描述】：

我有一个将在 php 中生成的菜单，其中可能包含两个不同的子 div。长话短说，php 将在“li”中添加一个类名为“showBubbles”的 div，和/或另一个类名为“hideLogo”的 div。如果存在“showBubbles” div，我需要执行一个函数，如果存在“hideLogo”，则需要执行另一个函数。如何在鼠标悬停时做到这一点？结构如下：

<ul>
<li>
    <a href="#"><img src="imagePlaceholder" /></a>
    <div class="showBubbles"></div>
    <div class="hideLogo"></div>
</li>
</ul>

【问题讨论】：

如果两个 div 都存在，你是否需要执行这两个函数？
是的，如果只有一个或两个函数都存在，则这两个函数都需要触发

标签： jquery if-statement jquery-selectors selector

【解决方案1】：

未经测试，但这应该可以解决问题。

$('ul').on('mouseover', 'li', function(e)
{
    if($(this).children('div').hasClass('showBubbles'))
    {
        // Execute code for showBubbles div
    }
    else
    {
        // Execute code if 'showBubbles' is not present
    }
}

【讨论】：

【解决方案2】：

在悬停回调函数内部，可以使用如下代码：

var showBubbles = $("li div.showBubbles").length;
if(showBubbles > 0){
   // first function here
}

var hideLogo = $("li div.hideLogo").length;
if(hideLogo > 0){
   // second function here
}

【讨论】：

我需要在里面放一个“this”吗？
这与此处的其他答案相同，只是我一次编写了所有模式li div.hideLogo，但其他人选择了li 并在回调中，其中this 指的是@987654325 @他们选择了模式的其余部分。结果是一样的。

【解决方案3】：

您可以通过尝试使用 jQuery 选择它，然后检查返回的 jQuery 对象的 length 来检查是否具有某个类的 div。例如，对于showBubbles：

var showBubblesExists = $('li .showBubbles').length > 0;

我相信这应该为您指出正确的解决方案。

【讨论】：

【解决方案4】：

$('ul').on('mouseover', 'li', function() {

   $(this).find('div.showBubbles').length && showBubbles(); //calls showBubbles()

   $(this).find('div.hideLogo').length && hideLogo(); //calls hideLogo()

});

【讨论】：

【解决方案5】：

尝试如下，

var sb = 0, hb = 0;
$('li').hover(function () {
   sb = $('.showBubbles', this).length;
   hb = $('.hideLogo', this).length;

   if (sb) {  /*function for sb*/ }
   if (hb) { /*function for hb*/ }

}, function () {

   if (sb) {
     //function for sb 
     sb = 0;
   }
   if (hb) { 
     //function for hb 
     hb = 0;
   }
});

【讨论】：

【解决方案6】：

试试这个

JS 代码

$('li').hover(function(){
    if($(this).find('.showBubbles')){
       showBubbles();
    }
    if($(this).find('.hideLogo')){
       hideLogo();
    }
});

function showBubbles(){
  alert('showBubbles response');
}

function hideLogo(){
  alert('hideLogo response');
}

JS FIDDLE CODE

【讨论】：

@TripsLeft 代码有效吗？如需修改请告知。