Question

I’m fairly familiar with jQuery, but I’m working on a project in YUI, which I am totally new to, and am not sure how to accomplish this.

In essence, I need to display a js popup if a span element exists that has the text “Inactive” in it and is several steps down the tree from a div with a class of “list_subpanel_cases”.

This is a rough example, but the point is, this is dynamically built, so my only definite selectors are the div with the class and the descendant span with a text value of “Inactive”.

<div class="list_subpanel_cases">
  <table>
    <tbody>
      <tr>
        <td>
          <span>Active</span>
        </td>
      </tr>
      <tr>
        <td>
          <span>Inactive</span>

And I need to find out if any spans exist with the text “Inactive”.

Hope this isn’t too confusing!

Answer 1

It appears that CSS3 selectors can’t examine content (only attributes) so you’d have to use a selector for the candidate span tags and then use code to look at the content for a match. Here’s one way to do that:

function findInactive() {
    var found = null;
    Y.all(".list_subpanel_cases span").some(function(node, index, nodeList) {
        if (node.getContent() == "Inactive") {
            found = node;
            return(true);   // stop looking for more matches
        }
        return(false);   // keep looking for more matches
    });
    return(found);
}

if (findInactive()) {
    // execute code here when the Inactive span exists
}

You can see it work here: http://jsfiddle.net/jfriend00/BVzqL/.