how to check for jQuery's FIND result

Question

I've been struggling with this simple script and could not find related problem here in StackOverflow. Here is my problem.

I have two boxes. A box is highlighted with blue if <div class="notselected"> becomes <div class="selected"> thru click event.

If no box is selected, the parent box should be highlighted with red, like so:

Here is a snippet:

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

Please let me know what I am missing. Thanks for any help!

Log `parent` and `selected` to the console. What do you get? — tobiv, Oct 18 '17 at 09:25
Also what event is intended to initialize the class check function? The way it's written now, it'll only run once on document.ready — UncaughtTypeError, Oct 18 '17 at 09:29

score 4 · Accepted Answer · answered Oct 18 '17 at 09:27

You were very close!

Simply check for selected.length instead of selected.

Demo for parent selection

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

Demo for child selection

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

score 0 · Answer 2 · answered Oct 18 '17 at 09:32

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

how to check for jQuery's FIND result

2 Answers2