javascript - 如何在变量上使用 StartsWith 选择器？

Question

根据 jQuery's API StartsWith选择器旨在用于整个文档。

例如，

var $elements = $( "span[id^='MJXc']" );

会找到所有<span> DOM 中 ID 以“MJXc”开头的 s。

但是，如果我有一个存储在变量中的元素数组，并且我只想从该数组中选择那些以 ... 开头的元素怎么办？我还能使用 StartsWith 吗？选择器？

以下似乎不起作用并给出了 Uncaught SyntaxError: Unexpected token (

var $elements = $arrayofelements.( "span[id^='MJXc']" );

我没有添加或删除任何括号，我只是在选择器前面插入了一个变量。

$arrayofelements在控制台中看起来像这样:

0:span#MJXc-Node-7.mjx-mrow
1:span#MJXc-Node-28.mjx-mi
2:span.mjx-base
3:span#MJXc-Node-34.mjx-mi

理想情况下，我希望返回元素 0、1 和 3，跳过元素 2，因为它没有以“MJXc”开头的 ID。

Answer 1

在 JQuery 中使用 .filter() 方法。

$arrayOfElements.filter('span[id^=MJXc]');

像大多数 JQuery 方法一样，它需要一个选择器。它返回一个新的 JQuery 对象，该对象仅包含与选择器匹配的元素(在本例中，ID 以 MJXc 开头的范围)。

// get only the spans inside #parent div
$spansToFilter = $('#parent').children();
$filteredSpans = $spansToFilter.filter('[id^=MJXc]');

// prove we've filtered out the span with no matching ID
$filteredSpans.each(function(i, item) {
  console.log(item);
});

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

<span id="MJXc-Node-7.mjx-mrow">(external skip)</span>

<div id="parent">
    <span id="MJXc-Node-7.mjx-mrow">A</span>
    <span id="MJXc-Node-28.mjx-mi">B</span>
    <span class=".mjx-base">(skip C)</span>
    <span id="MJXc-Node-34.mjx-mi">D</span>
</div>

您尝试的方法无效，因为在 Javascript 中 whatever.() 将无效；您将尝试调用一个没有名称的函数。在 JQuery 和 javascript 中，您总是在 obj.method() 链中的前一个对象上调用方法。这些方法正在返回具有相同方法集的新 JQuery 对象，这使得链接成为可能。 JQuery documentation 中列出了 JQuery 对象的所有方法。 ，包括.filter()、.find()、.children()等