代码之家  ›  专栏  ›  技术社区  ›  Yahya Uddin

使用jQuery选择元素的部分?

  •  1
  • Yahya Uddin  · 技术社区  · 11 年前

    我有以下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> 标签或 &nbsp; ). 请注意 我不想影响DOM本身 。我只想检索对象(如数组)中的文本。

    这是我目前所掌握的:

    $('#foo span');
    

    然而,我似乎无法删除“a”标记。

    以下内容似乎也不起作用:

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

    我也知道 .remove() 影响DOM本身,而不仅仅是检索文本。

    7 回复  |  直到 11 年前
        1
  •  3
  •   charlietfl    11 年前

    解决方案通过在每个子级上循环并克隆它以进行操作来创建数组,从而使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
  •  1
  •   Carlos Calla    11 年前

    这段代码将为您提供以下价值:

    $('#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
  •  0
  •   Rohit Kumar    11 年前

    由于您的问题不详细,根据您的要求,可以按以下方式进行

       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
  •  0
  •   Anders Atiqur    11 年前

    不知道这场比赛的规则是什么,但如果可以证明你想要的是在右边 &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
  •  0
  •   fdomn-m    11 年前

    使用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.jjoin());

    工作 fiddle

        6
  •  0
  •   guest271314    11 年前

    尝试使用选择器 $("foo span") , $.map() , String.prototype.match() 具有 RegExp [0-9]+|[a-z]+[^\s+|\n+|" + el.querySelector(".no-want").textContent + "]", "ig" 匹配数字或字符 a-z 不区分大小写,否定空格字符或换行符,或 ".no-want" 要素 .textContent 在 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
  •  0
  •   Glorfindel Doug L.    5 年前

    尝试使用RegEx来匹配所需内容

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

    JSFIDDLE