如何检查 jQuery 的 FIND 结果 [重复]答案

【问题标题】：how to check for jQuery's FIND result [duplicate]如何检查 jQuery 的 FIND 结果 [重复]
【发布时间】：2018-03-30 03:05:03
【问题描述】：

我一直在努力使用这个简单的脚本，但在 StackOverflow 中找不到相关问题。这是我的问题。

我有两个盒子。如果<div class="notselected"> 通过单击事件变为<div class="selected">，则一个框会以蓝色突出显示。

如果没有选中任何框，则父框应以红色突出显示，如下所示：

这是一个sn-p：

$(document).ready(function(){
    var parent = $(this).find(".parent");
    if(parent) {
        var selected = parent.find("div.selected");
        if(selected) {
            selected.css({"color": "blue", "border": "2px solid blue"});
        }
        else {
            parent.css({"color": "red", "border": "2px solid red"});
        }
    }
});

.ancestors *:not(script) { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="ancestors">
  <div class="parent"> Parent Box
    <div class="notselected"> Box A </div>
    <div class="notselected"> Box B </div>
  </div> 
</body>

请让我知道我缺少什么。感谢您的帮助！

【问题讨论】：

将parent 和selected 记录到控制台。你得到了什么？
clickevent 在哪里？
还有什么事件用于初始化类检查功能？按照现在的写法，它只会在 document.ready 上运行一次

标签： javascript jquery html css

【解决方案1】：

你非常接近了！

只需检查selected.length 而不是selected。

父选择演示

$(document).ready(function() {
  var parent = $(this).find(".parent");
  if (parent) {
    var selected = parent.find("div.selected");
    if (selected.length) {
      selected.css({
        "color": "blue",
        "border": "2px solid blue"
      });
    } else {
      parent.css({
        "color": "red",
        "border": "2px solid red"
      });
    }
  }
});

.ancestors * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
</script>

<div class="parent"> Parent Box
  <div class="noselected"> Box A </div>
  <div class="notselected"> Box B </div>
</div>

子选择演示

$(document).ready(function() {
  var parent = $(this).find(".parent");
  if (parent) {
    var selected = parent.find("div.selected");
    if (selected.length) {
      selected.css({
        "color": "blue",
        "border": "2px solid blue"
      });
    } else {
      parent.css({
        "color": "red",
        "border": "2px solid red"
      });
    }
  }
});

.ancestors * {
      display: block;
      border: 2px solid lightgrey;
      color: lightgrey;
      padding: 5px;
      margin: 15px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>
  </script>

  <div class="parent"> Parent Box
    <div class="selected"> Box A </div>
    <div class="notselected"> Box B </div>
  </div>

【讨论】：

【解决方案2】：

$(document).ready(function() {
  var parent = $(this).find(".parent");
  // check for the length property of the jquery object to get the number of elements matched
  if (parent.length != 0) {
    var selected = parent.find("div.selected");
    // same goes here
    if (selected.length != 0) {
      selected.css({
        "color": "blue",
        "border": "2px solid blue"
      });
    } else {
      parent.css({
        "color": "red",
        "border": "2px solid red"
      });
    }
  }
});

.ancestors * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="ancestors">
  <div class="parent"> Parent Box
    <div class="notselected"> Box A </div>
    <div class="notselected"> Box B </div>
  </div>
</div>

【讨论】：