JQuery选择器-如何检查特定路径是否存在？
JQuery选择器-如何检查特定路径是否存在？
提问于 2020-10-29 15:47:52
我有这个示例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>现在我有了一个javascript变量
var $cursor = $("ul#1"); // this variable is dynamic; This cannot be modified我的目标是如何检查特定路径是否存在？
我想检查这条路径是否存在，
$cursor > li > ul > li > select.test222不是这个，
$cursor > li > select.test222执行此操作时出现错误
$($cursor+" > li > ul > li select.test222");谢谢,
回答 3
Stack Overflow用户
发布于 2020-10-29 16:32:29
您可以使用selector context来确定一个选择器的目标，以搜索另一个选择器，而不是文档根目录。因此，在这种情况下，我们可以这样做：
var $selector = $('> li > ul > li select.test222', $cursor);然后，如果选择器存在，则只需使用the standard way to check：
if ($selector.length) {
// Your specific selector path exists
// ...
}Stack Overflow用户
发布于 2020-10-29 16:00:48
看起来像是将$cursor作为一个元素，而实际上您只需要id
我添加了一些变量来获取属性，并在选择器中使用它，并检查对象的长度。
如果对象有长度，那么它就存在。
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>
Stack Overflow用户
发布于 2020-10-29 16:09:09
您需要使用$.children以编程方式进行traverse the tree using jQuery
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>
以下是路由不匹配时会发生的情况：
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>
您也可以使用$.find并给它一个选择器，但是，它匹配任何子树，而不是从当前元素开始的任何内容。因此，它可以工作：
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>
请注意，如果您只希望这些元素是当前元素的子元素，则可能会产生误报：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64586909
复制相关文章
相似问题
腾讯云开发者
