Jquery fetch the text while ignore the class

Question

I need some help with my code, I have got a problem with fetch the text while ignore the class menu-list-count as it will display the value next to the text.

When I try this:

var mailfolder = $(this).not('[class="menu-list-count"]').text();

The return output will be:

test1 2

It should be:

test1

Here is the html:

<a id="iJ" class="menu-list-item mailfolder" href="#test1" target="_top" title="test1" tabindex="-1" draggable="false">
    <div class="qj">
        <i style="float: left;" class="folder_icon"></i>
    </div>
    <span style="margin-left: 7px;">test1 <span class="menu-list-count">2</span></span>
</a>

Here is the code:

$(document).on('click', '.mailfolder', function(e) {
    e.preventDefault();
    var mailfolder = $(this).not('[class="menu-list-count"]').text();
    alert(mailfolder);
});

I have tried this:

var mailfolder = $(this).find('span:not(.menu-list-count)').text();

It doesn't work when I try it as i still getting test1 2 so I dont really know what to do,

Can you please show me an example how I can get the span text while ignoring the class menu-list-count?

Hi chris, Please check out this [link](https://stackoverflow.com/questions/11270607/jquery-exclude-some-child-nodes-from-text) — Ritu, Aug 15 '20 at 18:24

score 1 · Accepted Answer · answered Aug 15 '20 at 21:26

Because you have a span in a span, in order to select the right one you need to change this line:

$(this).not('[class="menu-list-count"]')

to:

$(this).find('span:not([class="menu-list-count"])')

In order to get only the text belonging to the upper span you can combine .contents() with .filter():

$(this).find('span:not([class="menu-list-count"])').contents().filter(function() {
   return this.nodeType === Node.TEXT_NODE;  // get only text nodes
}).text()

The snippet:

$(document).on('click', '.mailfolder', function(e) {
    e.preventDefault();
    var mailfolder = $(this).find('span:not([class="menu-list-count"])').contents().filter(function() {
        return this.nodeType === Node.TEXT_NODE;
    }).text();
    console.log(mailfolder);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a id="iJ" class="menu-list-item mailfolder" href="#test1" target="_top" title="test1" tabindex="-1" draggable="false">
    <div class="qj">
        <i style="float: left;" class="folder_icon"></i>
    </div>
    <span style="margin-left: 7px;">test1 <span class="menu-list-count">2</span></span>
</a>

score 0 · Answer 2 · answered Aug 15 '20 at 18:24

I'm not sure with JQuery, but with plain JS you can use childNodes to filter everything that is not a textNode and then concatenate the result.

I've wrote a small JSFiddle to show how it works: https://jsfiddle.net/sandro_paganotti/4873muzp/6/

HTML


<div>
  Hello
  <b>Some Text</b>
</div>

JS:


const nodes = Array.from(document.querySelector('div').childNodes);
const text = nodes.map(t => 
    t.nodeType == Node.TEXT_NODE 
    ? t.textContent 
    : ''
);
console.log(text.join(''));

Jquery fetch the text while ignore the class

2 Answers2