用jQuery选择元素的一部分？答案

【问题标题】：Selecting parts of an element with jQuery?用jQuery选择元素的一部分？
【发布时间】：2015-12-14 09:17:15
【问题描述】：

我有以下 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 在 JS 中仅获取以下 1、2 和 hello（这意味着没有 <a> 标签或 &nbsp;）。请注意我不想影响 DOM 本身。我只想检索一个对象（例如数组）中的文本。

这是我目前所拥有的：

$('#foo span');

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

以下似乎也不起作用：

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

我也知道.remove() 会影响它自己的 DOM，而不仅仅是检索文本。

【问题讨论】：

试试：$('#foo span a').remove();
“get”是什么意思？你想要变量中的数字吗？您无法获得对编号的节点的引用，因为该编号不是完整节点。
删除很简单...get 和display 但是不是一回事。什么是实际目标？
现在澄清问题
思路一样，要解析&nbsp;之后的值

标签： javascript jquery jquery-selectors

【解决方案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"]

DEMO

【讨论】：

【解决方案2】：

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

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

工作 jsFiddle： http://jsfiddle.net/mrwqs2nb/1/

打开控制台，你会看到：

1
2
Hello

【讨论】：

【解决方案3】：

由于您的问题不详细，根据您的要求，可以如下进行

   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/

【讨论】：

【解决方案4】：

不确定这个游戏的规则是什么，但如果可以假设你想要的在&nbsp;的右边，那么应该这样做：

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

【讨论】：

【解决方案5】：

使用 jquery 的contents - 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());

工作fiddle

【讨论】：

【解决方案6】：

尝试使用选择器 $("foo span") 、 $.map() 、 String.prototype.match() 和 RegExp [0-9]+|[a-z]+[^\s+|\n+|" + el.querySelector(".no-want").textContent + "]", "ig" 来匹配数字或字符 a-z 不区分大小写、否定空格字符或换行符，或 ".no-want" 元素 @987654328 @@index 父 span 元素

var res = $.map($("#foo span"), function(el, index) {
            return el.textContent.match(new RegExp("[0-9]+|[a-z]+[^\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>

【讨论】：

【解决方案7】：

尝试使用 RegEx 匹配您想要的内容

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

JSFIDDLE

【讨论】：

不一定是数字。