由于内部元素[重复]，通过文本在 jQuery 中过滤不起作用

Question

我正在尝试使用 jQuery 提取与某个短语匹配的元素。

我有以下 HTML：

<a href="#" class="drop-menu" data-name="admissions-ul">Admissions<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="16px" viewBox="0 0 17 16" version="1.1" class=" replaced-svg">
    <!-- Generator: sketchtool 57.1 (101010) - https://sketch.com -->
    <title>251A26C8-EC92-4EBA-B449-40FA2643F2CB@2x</title>
    <desc>Created with sketchtool.</desc>
    <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="Main-Navigation" transform="translate(-256.000000, -139.000000)" stroke="#009F9B" stroke-width="3">
            <g id="add-icon" transform="translate(258.000000, 140.000000)">
                <path d="M6.5,13.5 L6.5,0.5" id="Line-26"></path>
                <path d="M0,7 L13,7" id="Line-26-Copy"></path>
            </g>
        </g>
    </g>
</svg></a>

我正在使用以下代码尝试提取它：

let tempElements = $(targetElement).filter(function () {
                return $(this).text() === phrase;

            })

这里，targetElement 是 a，phrase 是 Admissions。这应该有效，但它返回空白。我怀疑这是因为 a 标签内的 SVG。我该如何解决这个问题？

Answer 1

为了只获取元素的直接子文本并忽略嵌套元素中的文本，您需要克隆元素，删除子节点，然后获取文本 — 如 this answer illustrates。完成此操作后，您可以将其与要过滤的文本进行比较。例如：

$(function() {

  const shallowTextMatch = (selector, text) => {
    return $(selector).filter(function() {
      let shallowText = $(this).clone().children().remove().end().text().trim()
      return shallowText === text
    })
  }

  let matchingElements = shallowTextMatch('a', 'Admissions')

  console.log(matchingElements.length) // 2
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#">Admissions<span>Other Text</span></a>
<a href="#">Academics<span>More Ignored Text Admissions </span></a>
<a href="#">About<span>Lorem Ipsum</span></a>
<a href="#">Contact<span>Dolor Amit</span></a>
<a href="#">Admissions<span>For a second match</span></a>
<a href="#">Best Admissions<span>Ignored</span></a>

Answer 2

您可以使用contents().first() 定位第一个childNode，即文本节点

const phrase = 'Admissions'

$('a').filter(function(){
  return $(this).contents().first().text().trim() === phrase 
}).css('color', 'red')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="drop-menu" data-name="admissions-ul">Admissions<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="16px" viewBox="0 0 17 16" version="1.1" class=" replaced-svg">
    <!-- Generator: sketchtool 57.1 (101010) - https://sketch.com -->
    <title>251A26C8-EC92-4EBA-B449-40FA2643F2CB@2x</title>
    <desc>Created with sketchtool.</desc>
    <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="Main-Navigation" transform="translate(-256.000000, -139.000000)" stroke="#009F9B" stroke-width="3">
            <g id="add-icon" transform="translate(258.000000, 140.000000)">
                <path d="M6.5,13.5 L6.5,0.5" id="Line-26"></path>
                <path d="M0,7 L13,7" id="Line-26-Copy"></path>
            </g>
        </g>
    </g>
</svg></a>

<a href="#" class="drop-menu" data-name="admissions-ul">Best Admissions<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="16px" viewBox="0 0 17 16" version="1.1" class=" replaced-svg">
    <!-- Generator: sketchtool 57.1 (101010) - https://sketch.com -->
    <title>251A26C8-EC92-4EBA-B449-40FA2643F2CB@2x</title>
    <desc>Created with sketchtool.</desc>
    <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="Main-Navigation" transform="translate(-256.000000, -139.000000)" stroke="#009F9B" stroke-width="3">
            <g id="add-icon" transform="translate(258.000000, 140.000000)">
                <path d="M6.5,13.5 L6.5,0.5" id="Line-26"></path>
                <path d="M0,7 L13,7" id="Line-26-Copy"></path>
            </g>
        </g>
    </g>
</svg></a>