CODEWITHSUNDEEP
jquery
apelidoko
apelidoko

Reputation: 780

JQuery Selector - How to Check if Specific Path Exists?

I have this sample HTML,

<ul id=1>
    <li>
        <select class='test1'>test1</select>
    </li>
    <li>
         <select class='test222'>test222</select>
    </li>
    <li>
        <ul>
           <li>
              <select class='test222'>test222</select>
           </li>
        </ul>        
    </li>
    <li>
        <select class='test3'>test3</select>
    </li>
</ul>
<ul id=2>
    <li>
        <select class='test11'>test11</select>
    </li>
    <li>
        <select class='test12'>test13</select>
    </li>
    <li>
        <select class='test13'>test13</select>
    </li>
</ul>

Now I have a javascript variable

var $cursor = $("ul#1"); // this variable is dynamic; This cannot be modified

My goal is how do I check if specific path exists?

I want to check if this path exists,

$cursor > li > ul > li > select.test222

Not this one,

$cursor > li > select.test222

I am getting error when doing this

$($cursor+" > li > ul > li select.test222");

Thank You,

Upvotes: 0

Views: 81

Answers (3)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 14520

You can use selector context to target a selector to search another selector, instead of the document root. So in this case, we can do:

var $selector = $('> li > ul > li select.test222', $cursor);

And then it is just a matter of using the standard way to check if that selector exists:

if ($selector.length) {
    // Your specific selector path exists
    // ...
}

Working JSFiddle.

Upvotes: 3

VLAZ
VLAZ

Reputation: 28967

You need to programmatically traverse the tree using jQuery by using $.children:

var $cursor = $("ul#1"); // this variable is dynamic; This cannot be modified

//$cursor > li > ul > li > select.test222
var elements = $cursor
  .children("li")
  .children("ul")
  .children("li")
  .children("select.test222");
  
console.log("$cursor > li > ul > li > select.test222 exists:", elements.length > 0);

//$cursor > li > ul > li > select.test333
var elements2= $cursor
  .children("li")
  .children("ul")
  .children("li")
  .children("select.test333");
  
console.log("$cursor > li > ul > li > select.test333 exists:", elements2.length > 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id=1>
    <li>
        <select class='test1'>test1</select>
    </li>
    <li>
         <select class='test222'>test222</select>
    </li>
    <li>
        <ul>
           <li>
              <select class='test222'>test222</select>
           </li>
        </ul>        
    </li>
    <li>
        <select class='test3'>test3</select>
    </li>
</ul>
<ul id=2>
    <li>
        <select class='test11'>test11</select>
    </li>
    <li>
        <select class='test12'>test13</select>
    </li>
    <li>
        <select class='test13'>test13</select>
    </li>
</ul>

Here is what happens when the route isn't matched:

var $cursor = $("ul#1"); // this variable is dynamic; This cannot be modified

//$cursor > li > ul > li > select.test222
var elements = $cursor
  .children("li")
  .children("ul")
  .children("li")
  .children("select.test222");
  
console.log("$cursor > li > ul > li > select.test222 exists:", elements.length > 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id=1>
    <li>
        <select class='test1'>test1</select>
    </li>
    <li>
         <select class='test222'>test222</select>
    </li>
    <li>
        <ul>
           <li>
              
           </li>
        </ul>        
    </li>
    <li>
        <select class='test3'>test3</select>
    </li>
</ul>
<ul id=2>
    <li>
        <select class='test11'>test11</select>
    </li>
    <li>
        <select class='test12'>test13</select>
    </li>
    <li>
        <select class='test13'>test13</select>
    </li>
</ul>

You could also use $.find and give it a selector, however, it matches any subtree, not anything that starts from the current element. So, it can work:

var $cursor = $("ul#1"); // this variable is dynamic; This cannot be modified

//$cursor > li > ul > li > select.test222
var elements = $cursor
  .find("li > ul > li > select.test222");
  
console.log("$cursor > li > ul > li > select.test222 exists:", elements.length > 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id=1>
    <li>
        <select class='test1'>test1</select>
    </li>
    <li>
         <select class='test222'>test222</select>
    </li>
    <li>
        <ul>
           <li>
              <select class='test222'>test222</select>
           </li>
        </ul>        
    </li>
    <li>
        <select class='test3'>test3</select>
    </li>
</ul>
<ul id=2>
    <li>
        <select class='test11'>test11</select>
    </li>
    <li>
        <select class='test12'>test13</select>
    </li>
    <li>
        <select class='test13'>test13</select>
    </li>
</ul>

Beware that it might produce a false positive if you only expect these to be the children of the current element:

var $cursor = $("ul#1"); // this variable is dynamic; This cannot be modified

//$cursor > li > ul > li > select.test222
var elements = $cursor
  .find("li > ul > li > select.test222");
  
console.log("$cursor > li > ul > li > select.test222 exists:", elements.length > 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id=1>
    <li>
        <select class='test1'>test1</select>
    </li>
    <li>
         <select class='test222'>test222</select>
    </li>
    <div> <!-- extra element, so now it's not a direct child of ul#1 -->
      <li>
          <ul>
             <li>
                <select class='test222'>test222</select>
             </li>
          </ul>        
      </li>
    </div>
    <li>
        <select class='test3'>test3</select>
    </li>
</ul>
<ul id=2>
    <li>
        <select class='test11'>test11</select>
    </li>
    <li>
        <select class='test12'>test13</select>
    </li>
    <li>
        <select class='test13'>test13</select>
    </li>
</ul>

Upvotes: 0

Stender
Stender

Reputation: 2492

Seems like you are getting $cursor as an element, where you actually just want the id

I added some variables to get the attribute, and use it in your selector, and check the length of the object.

If the object has length, then it exists.

var cursor = $("ul#1"); // this variable is dynamic; This cannot be modified
var id = cursor.attr('id');
var elementToCheck = $("#"+id+" > li > ul > li select.test222").length;
if(elementToCheck){
  console.log('element exists');
} else {
  console.log('element does not exists');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id=1>
    <li>
        <select class='test1'>test1</select>
    </li>
    <li>
         <select class='test222'>test222</select>
    </li>
    <li>
        <ul>
           <li>
              <select class='test222'>test222</select>
           </li>
        </ul>        
    </li>
    <li>
        <select class='test3'>test3</select>
    </li>
</ul>
<ul id=2>
    <li>
        <select class='test11'>test11</select>
    </li>
    <li>
        <select class='test12'>test13</select>
    </li>
    <li>
        <select class='test13'>test13</select>
    </li>
</ul>

Upvotes: 0

Related Questions