javascript - JQuery 过滤函数忽略 html 元素并只搜索文本

Question

我目前有以下 JQuery 过滤器，其中 holiday_days 是可变日期数字(例如 1、2、3、4...28、29、30)。文本必须完全匹配，例如，如果 holiday_days = 1，它不会返回 1、10、11、12...

var element = $('td').filter(function() { 
                return Number(this.textContent) == holiday_days; 
            });

我的 html 看起来有点像下面这样:

<table>
    <tr>
        <td class="holiday_days">
            "holiday_days"
        </td>
        ...

在代码中，我后来在文本下方的某些分隔符上附加了一个跨度。

<table>
    <tr>
        <td class="holiday_days">
            "holiday_days"
            <-- appended -->
            <span>There is a link in here</span>
            <-- appended -->
        </td>
        ...

那么我的过滤器什么都不返回。我怎么可能

1. 忽略跨度并只搜索文本(确切地说 - 包含在这里不起作用)

或

1. 基于td类过滤，不改变

Answer 1

有两种方法可以解决这个问题。简单的方法是将值包装在它自己的 span 中，这样您就可以在没有 sibling 的情况下直接检索它:

<td class="holiday_days">
    <span class="holiday-days">[holiday_days]</span>
    <span>There is a link in here</span>
</td>

var element = $('td').filter(function() { 
    return parseInt($(this).find('.holiday-days').text(), 10) == holiday_days; 
});

或者，您可以保持 HTML 不变，并从 td 本身读取第一个 textNode 值:

var element = $('td').filter(function() { 
    var holidayText = $(this).contents()[0].textContent.trim();
    return parseInt(holidayText, 10) == holiday_days; 
});