使用jQuery选择元素的一部分？

Question

我有以下HTML：

<div id="foo">
    <span>
        <a href="#" class="no-want">X</a>
        &nbsp;
        1
    </span>
    <span>
        <a href="#" class="no-want">X</a>
        &nbsp;
        2
    </span>
    <span>
        <a href="#" class="no-want">X</a>
        &nbsp;
        Hello
    </span>
</div> 

我想使用jQuery只得到如下1 ， 2和hello的JS（这意味着没有<a>标签或  请注意， 我不想影响DOM本身 。 我只想检索对象（例如数组）中的文本。

这是我到目前为止的内容：

$('#foo span');

但是我似乎无法删除“ a”标签。

以下似乎也不起作用：

$('#foo span').remove('a');

我也知道.remove()会影响它自身的DOM，而不仅仅是获取文本。

Answer 1

解决方案通过遍历每个孩子并将其克隆以进行操作来创建数组，从而使dom保持完整

var values = $('#foo').children().map(function () {
    var $clone = $(this).clone();
    $clone.children().remove();
    return $.trim($clone.text());    
}).get();

console.log(values) /// ["1","2","Hello"]

演示

Answer 2

这段代码将为您获得该价值：

$('#foo span').each(function(){
    console.log($.trim($(this).html().substring($(this).html().lastIndexOf(" ") + 6)));
});

可用的jsFiddle： http ： //jsfiddle.net/mrwqs2nb/1/

打开控制台，您将看到：

1
2
Hello

Answer 3

尝试使用RegEx匹配您想要的

$('#foo span').each(function () {
  alert($(this).html().match(/[0-9]/));
});

JSFIDDLE

Answer 4

由于您的问题没有详细说明，因此根据您的要求，可以按照以下步骤进行操作

   var res=[];
    $('#foo span').map(function(i){
    var htm=$(this).text();
    var htm_d=$(this).find('a').html();
    htm=$.trim(htm.split("").reverse().join(""));
    htm_d=$.trim(htm_d.split("").reverse().join(""));
    res[i] = htm.substring(0,htm_d.length); 
    } );
    alert(res);

直播http://jsfiddle.net/mailmerohit5/5bvavx0p/

Answer 5

不确定该游戏的规则是什么，但是可以假定您想要的东西位于 的右侧  然后应该这样做：

$('#foo span').map(function() {
    //Split at the space.
    var parts = $(this).html().split(' ');
    //Remove the first element from the list.
    parts.shift();
    //Join and return.
    return parts.join('');
}).get();

Answer 6

尝试将选择器$("foo span") ， $.map() ， String.prototype.match()与RegExp [0-9]+|[az]+[^\\s+|\\n+|" + el.querySelector(".no-want").textContent + "]", "ig"到数字或字符匹配az大小写不敏感的，否定空格字符，或换行字符，或者".no-want"元件.textContent在index父的span元件

 var res = $.map($("#foo span"), function(el, index) { return el.textContent.match(new RegExp("[0-9]+|[az]+[^\\s+|\\n+|" + el.querySelector(".no-want").textContent.trim() + "]", "ig")) }); console.log(res) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="foo"> <span> <a href="#" class="no-want">X</a> &nbsp; 1 </span> <span> <a href="#" class="no-want">X</a> &nbsp; 2 </span> <span> <a href="#" class="no-want">X</a> &nbsp; Hello </span> </div> 

Answer 7

使用jquery的内容 -api页面上有一个示例，说明如何在忽略其他元素的同时添加文本节点。

var result = $("#foo span")
             .contents()
             .filter(function() {
                 // #text nodes
                 return this.nodeType === 3;
             }).map(function() {
                 // get the value and trim it (also removes &nbsp)
                 return $(this).text().trim();
             }).filter(function() {
                 // remove blanks
                 return this != "";
             }).toArray();

$（“＃result”）。text（result.join（））;

工作提琴