4

这是我的 div ：

<div id="myDiv">The 
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best</span>
 way to receive congrats 
<span>
  <span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are</span>
  <div class="btn-group">
    <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a class="prop0-1">is</a></li>
        <li><a class="prop0-1">are</a></li>
    </ul>
  </div>
</span> to give a correct answer.</div>

我想得到这样的文字：“接受祝贺的最好方法是给出正确的答案。”

所以我打电话$('#myDiv').text()。它不起作用，因为我在ul.dropdown-menu.

下一步是过滤或删除不需要的孩子，即：

<div class="btn-group">
  <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a class="prop0-1">is</a></li>
    <li><a class="prop0-1">are</a></li>
  </ul>
</div>

我尝试使用带有 jquery 选择器的 $.filter 或 $.not 或 $.children 等。我找不到正确的方法来做到这一点。需要帮忙！

您可以在 jsfiddle 中找到一些代码：http: //jsfiddle.net/Ku7FY/

[编辑] 一种解决方案建议使用此代码：

$('#result').append( $('#myDiv').text().replace($(".btn-group").text(),"") ).append('<br />')

如果div.btn-group存在多个，只需循环为：

var result = $('#myDiv').text();
$(".btn-group").each(function() {
    result = result.replace($(this).text(),"");
});
$('#result').append(result).append('<br />')
4

4 回答 4

2

所以，如果我明白这一点，你想从.text(). 尝试类似：

$('#result').append( $('#myDiv').text().replace($(".dropdown-menu").text(),"") ).append('<br />')
于 2013-04-26T16:10:26.960 回答
1

尝试

function process(el){
    var array = [];
    $(el).contents().each(function(){
        var $this = $(this), text;
        if(this.nodeType == 3){
            text = $.trim($this.text());
            if(text){
                array.push(text)
            }
        } else if($this.is(':not(.btn-group)')){
            Array.prototype.push.apply(array, process(this))
        }
    })
    return array;
}

console.log(process($('#myDiv')).join(' '))

演示：小提琴

于 2013-04-26T16:17:33.013 回答
1

如果您不介意将所有“哑”文本放在跨度中，那么您可以非常简单地通过仅抓取“哑”文本跨度和“.cordial-err-corr”跨度（和一个find()）来做到这一点。

<div class="well" id="myDiv"><span class="cordial-content">The </span> 
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best </span>
 <span class="cordial-content">way to receive congrats  </span>
<span>
  <span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are </span>
  <div class="btn-group">
    <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a class="prop0-1">is</a></li>
        <li><a class="prop0-1">are</a></li>
    </ul>
  </div>
</span> <span class="cordial-content">to give a correct answer. </span></div>

和

$('#myDiv').find('.cordial-err-corr,.cordial-content').text()

演示：小提琴

于 2013-04-26T16:22:02.713 回答
1

我有一个丑陋的，虽然很简单（我猜）的方法：

我们可以制作一个副本，然后删除我们不想显示的 dom 元素。然后我们就可以得到想要的文本了。

var clone_div = $('#myDiv').clone();
clone_div.find('.btn-group').remove();
$('#result').append(clone_div.text()).append('<br />');

这是jsfiddle。http://jsfiddle.net/Ku7FY/4/

于 2013-04-26T16:22:25.110 回答