使用 "this" jquery 获取 parents 文本数据

Question

我的文档中有以下 HTML 结构 HTML STRUCTURE

[![在此处输入图片描述][1]][1]

我需要获取 info__meta-dates 文本，因此只有在 jQuery 中使用 onClick 事件的日期，这是我目前拥有的代码：

 $("input[type=checkbox]").click(function (e) {
       
            $(this)
                .parent()
                .parent()
                .parent()
                .find(".info__meta--dates")
                .text()
         );
});

但我也得到了嵌套范围内的 date 文本。

Answer 1

您可以 clone 该跨度标签并使用 .remove() 从克隆的元素中删除 mdc-typography--caption，这样最终结果将只是您需要的文本

演示代码 :

$("input[type=checkbox]").click(function(e) {
  var texts = $(this).closest(".ev-info_meta").find(".info__meta--dates").clone(); //clone that span tag
  texts.find('span.mdc-typography--caption').remove(); //remove elemnt with class mdc-typography--caption
  console.log(texts.text().trim()); //show 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ev-info_meta">
  <span class="info__meta--dates"><span class="mdc-typography--caption">dates</span> fffff</span>
  <div>
    <input type="checkbox">
  </div>
</div>

Answer 2

由于没有直接获取日期的元素，你可以尝试上面Swati解释的方法，如果你不愿意从DOM中删除元素，那么试试字符串操作方法。

以下方法仅适用于这种情况。

$("input[type=checkbox]").click(function (e) {
       
         let dateString =  $(this).parent()
                .parent()
                .parent()
                .find(".info__meta--dates")
                .text()
         );
       //removing the "date" string from the entire string
       let date = dateString.substring(4,dateString.length).trim();
       console.log(date);
});

使用 "this" jquery 获取 parents 文本数据

Get parents text data using "this" jquery

javascript

jquery

text

parent

onclick