jQuery：如果选择元素存在则做某事答案

【问题标题】：jQuery: do something if select element existsjQuery：如果选择元素存在则做某事
【发布时间】：2011-08-16 13:45:05
【问题描述】：

嘿，我在 Stack Overflow 上环顾四周，并尝试了其他人的一些尝试，但我就是无法让它工作。

我有一个这样的选择元素：

<select id="slct_firstCat" name="slct_firstCat" size="15">
</select>

这仅在特定的 AJAX 请求完成后显示，因此此选择元素不会与原始页面的 DOM 一起加载，它在主页加载后作为单独的 AJAX 请求加载。

我基本上是想做这个……

if (/* select element exists */) {
  // Then change the colour of a div to green
} else {
  // Change the colour to red
}

但请记住，这必须在页面加载后工作。如果需要，我可以单击选择运行 JS 函数。

我在下面尝试了这段代码，但无法让它工作：

if ($(".element1").length > 0 || $(".element2").length > 0 {
  // code
}

所以基本上，如果选择元素存在，则将选项卡颜色更改为绿色，否则将其更改为红色。

【问题讨论】：

难道你不能检测到 AJAX 请求的完成并在 .success() 回调中执行你的 ...stuff... 吗？

标签： javascript ajax jquery jquery-selectors

【解决方案1】：

您必须将代码放入jQuery.ajax() 的成功回调中。 > 0 部分在 $('.element1').length > 0 中不需要，因为与 Ruby 不同，0 和 "" 在 JavaScript 中也是 falsy。

jQuery.ajax({
    url: 'example.php',
    success: function () {    
        if ($('#slct_firstCat').length) {
            $('#myDiv').css('color', 'green');
        } else {
            $('#myDiv').css('color', 'red');
        }
});

【讨论】：

如果不使用$myDiv var，直接使用selector，只会搜索一次（在这种情况下），所以不需要。
@EdgarVillegasAlvarado：不，你错了。如果我做将它存储在一个变量中，它只会搜索一次。
看看你的代码。 $myDiv.css(...) 只执行 ONCE （因为它不能同时进入 if 和 else 分支）所以在这种情况下存储它根本没有帮助。

【解决方案2】：

你可以尝试使用类似的东西：

 if ($('select#slct_firstCat').length) {
    // ... stufff....
  }

【讨论】：

input#slct_firsTcat 不起作用。这是一个选择，而不是一个输入。而且jQuery没有.exists()函数。

【解决方案3】：

将你的 if 块移动到 ajax 成功它将起作用

举个例子

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
   if ($(".element1").length > 0 || $(".element2").length > 0 {
  ...stuff...
}
  }
});

【讨论】：

+1 表示成功回调，-1 表示不显示如何为 div 着色——所以我不投票。
@nyus，没关系，我以为他已经有代码...用于更改颜色。，我看了你的回答..那很好

【解决方案4】：

您应该在事件发生时更改颜色，即当您的 ajax 调用成功、开始或触发另一个事件时。无论如何，您可以使用此代码，这不是最好的方法，但适合您的需求：

$(document).ready(function(){
  setInterval(function(){
      if($("#slct_firstCat").size() > 0)
          $("#divColour").css("backgroundColor", "green");
      else
          $("#divColour").css("backgroundColor", "red");
  }, 100);
});

【讨论】：