Question

HTML code

<article class="evn-mn-pane">
    <h2><a href="somelink.php">leborium</a></h2>
    <div class="evn-date">20 June, 2013 |  Dr.some name some name1</div>
    <figure>
        <img src="images/events/speakers/no-image.jpg" alt="Dr. Somename"/>
            <figcaption>test link tested some dummy text this...
                <a href="somlink.php">more</a>
            </figcaption>
            <div class="clear"></div>
    </figure>
</article>

<article class="evn-mn-pane">
    <h2><a href="somelink.php">leborium</a></h2>
    <div class="evn-date">20 June, 2013 |  Dr.some name some name1</div>
    <figure>
        <img src="images/events/speakers/no-image.jpg" alt="Dr. Somename"/>
            <figcaption>test link tested some dummy text this...
                <a href="somlink.php">more</a>
            </figcaption>
            <div class="clear"></div>
    </figure>
</article>

Jquery code

$('article').each(function(){
    alert($(this).find('figure > figcaption').html());
});

Result

test link tested some dummy text this...

          <a href="somlink.php">more</a>

Expected Result

test link tested some dummy text this...

Tried this SO link

Tried Code

$('article').each(function(){
    alert($(this).find('figure > figcaption').contents(':not(a)').html());
});

Getting Result

undefined

JSFIDDLE

How to achieve the expected result?any helps are appreciated FYI: I am using jquery1.8.3

UPDATE

I want to take all other tags other then anchor tag, and expecting the result other then using clone method.

Was it helpful?

Solution

contents doesn't take any arguments. This works even if you add more text after the a.

$('article').each(function() {
    var t = $(this).find('figure > figcaption').contents().filter(function() {
        return this.nodeType === 3; //3 = TEXT_NODE
    });
    alert(t.text());

});

Updated JSFiddle

If you want every piece of text within figcaption except the text in a, use this:

return this.nodeType === 3 || this.tagName !== 'A';

Regarding the nodeType property

<a id='a'>asdf</a>

var a = document.getElementById('a');
a.nodeType === Node.ELEMENT_NODE; //true
a.firstChild.nodeType == Node.TEXT_NODE; //true asdf

More on Node types

OTHER TIPS

This is a quick dirty way to do this. You make a clone and remove all the children. Obviously you can apply filtering to remove certain children only. The code:

$('article').each(function(){
   var $cap =  $(this).find('figcaption')
   .clone()
   .children()
   .remove()
   .end();
   alert($cap.text());
});

The text is the first childNode:

$('article').each(function(){
    console.log($(this).find('figure > figcaption')[0].childNodes[0].data);
});

FIDDLE DEMO

Find and remove a like this (Updated to not remove link from HTML):

$('article').each(function(){
    var div = $("<div>" + $(this).find('figure > figcaption').html() + "</div>");
    div.find('a').remove();
    alert(div.html());
});

jsFiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top