获取没有隐藏范围标记文本的标题文本

Question

下面是一个示例表：

<table id="table">
<caption>
  My Table <span style="display:none"> Hidden </span>
</caption>
<tr>
    <th>abc</th>
    <th>xyz</th>
</tr>
</table>

$(function(){ 
 CaptionText = $('#table').find('caption').text();
 alert(CaptionText);
});

如何避免隐藏的跨度标签文本。小提琴在这里：

https://jsfiddle.net/y39e483q/1/

Answer 1

text() 方法还将返回所有后代元素的文本内容。

一种解决方案是进行手动过滤器以省略隐藏元素

$(function() {
  var myTable = $('#table');
  var myCaptionText = myTable.find('caption').contents().filter(function() {
    return !$(this).is(':hidden')
  }).text();
  snippet.log('caption: ' + myCaptionText);
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <caption>
    My Table <span style="display:none"> Hidden </span>
  </caption>
  <tr>
    <th>abc</th>
    <th>xyz</th>
  </tr>
</table>

Answer 2

简单用法clone，然后remove the span并得到text

$('#table').find('caption').clone().remove('span').text().trim()

Answer 3

试试这个jquery代码 JSFiddle

  ($('#table caption').text()).replace($('span').text(),'')

Answer 4

试试这个：

$(function(){ 
 myTable = $('#table');
 myCaptionText = myTable.find('caption').html();
 var substr = myCaptionText.split('<span');
 alert(substr[0]);
});

这将忽略标题内的 span 标记。你可以这样简化它。

$(function(){ 
     myTable = $('#table');
     myCaptionText = myTable.find('caption').html().split('<span');
     alert(myCaptionText[0]);
    });

Answer 5

你可以像下面这样写

$(function(){ 
     myTable = $('#table');
     myCaptionText = myTable.find('caption').html().split('<span');
     alert(myCaptionText[0]);
    });

Answer 6

这是我本来会做的：

$(function() {
  myTable = $('#table');
  myCaptionText = myTable.find("caption").text().replace($("table caption").find(":not(:visible)").text(), "")
  alert(myCaptionText);
});

这是JSFiddle演示

基本上，代码在<caption>中找到隐藏的元素，并在最终文本中将其文本替换为空白。

Answer 7

**Try the answer below :** 
https://jsfiddle.net/myeo3a4r/2/

.......

.HTML

     <table id="containerDiv">
  <caption>You know, <span style="display:none"> I am inv<p>incible!</span>   </caption>
    <tr>
      <th>Month</th>
     <th>Savings</th>
        </tr>
       <tr>
        <td>January</td>
       <td>$100</td>
     </tr>
  </table>

JAVASCRIPT

 var _string = '';
   _childrenElements = document.getElementById('containerDiv').children;
  for(var i = 0; i < _childrenElements.length; i++) {
  if(_childrenElements[i].tagName == 'CAPTION') {
    _string = _string.concat(_childrenElements[i].textContent)  ;
    }
  }
  alert(_string);