jQuery：如果选择元素存在，则执行某些操作

Question

嘿，我在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
}

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

- anon

---

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

Answer 1

您需要将代码放在jQuery.ajax()的成功回调中。在$('.element1').length > 0中不需要> 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');
        }
});

- alexia

---

如果您不使用$myDiv变量，而是直接使用选择器，则它只会搜索一次（在这种情况下），因此不需要它。 - Edgar Villegas Alvarado

@EdgarVillegasAlvarado：不，你错了。如果我存储它在一个变量中，它只会搜索一次。 - alexia

看看你的代码。$myDiv.css(...) 只会执行 一次（因为它不能进入 if 和 else 分支），所以在这种情况下存储它根本没有帮助。 - Edgar Villegas Alvarado

Answer 2

您可以尝试使用类似以下的方法：

您可以尝试使用类似以下的方法：

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

- pconcepcion

---

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

Answer 3

将你的 if 块移动到 ajax 成功的位置，它会正常工作。

只是举个例子。

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

- kobe

---

成功回调加1分，不展示如何给div着色则扣1分，所以我不投票。 - alexia

@nyus，没关系，我以为他已经有改变颜色的代码了。我看了你的回答，很好。 - kobe

Answer 4

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

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

- Edgar Villegas Alvarado