Iterating the article and taking the html with out Its anchor tag

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.

Did you try this code: `$(this).find('figure > figcaption').clone().find('a').remove().end().text();`? — Xeon, Jul 16 '13 at 05:39

c.P.u1 · Accepted Answer · 2013-07-16T06:20:45.660

1

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

edited Jul 16 '13 at 06:20

answered Jul 16 '13 at 05:52

c.P.u1

16,664
6
46
41

If we added any-other tags with in figcaption it will not display those content am I correct? – Thirumalai murugan Jul 16 '13 at 06:00
1

Do you mean you want every piece of text within `figcaption` except the text within `a`? Please check the updated answer then. – c.P.u1 Jul 16 '13 at 06:06
thanks this is what I expect could you explain about nodeType and why its needed? +1 for your answer – Thirumalai murugan Jul 16 '13 at 06:10
as far as Now your answer only correct I am accepting it now if there is any other better solution comes mean I will accept that, thank you – Thirumalai murugan Jul 16 '13 at 06:33

score 1 · Answer 2 · answered Jul 16 '13 at 06:08

1

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());
});

answered Jul 16 '13 at 06:08

Naveed Ahmad

3,176
1
15
18

yes its works is it dirty way? why?+1 for you, and I tried to achieve with out clone the element – Thirumalai murugan Jul 16 '13 at 06:14
Because you're cloning the element and making a copy. The ideal way would be to just filter the text from the original element rather than making a copy, but I couldn't come up with any elegant solution. Please mark answered if that worked for you. :) – Naveed Ahmad Jul 16 '13 at 06:17
I am expecting the with out clone, In my question also I have mentioned so that I didn't mark as answerd – Thirumalai murugan Jul 16 '13 at 06:18
A quick research revealed that we can use `contents()` method to get all children and then filter through each based on node types: `var $cap = $(this).find('figcaption').contents().filter(function() { return this.nodeType == Node.TEXT_NODE; });` will get you text nodes. Take a look: http://api.jquery.com/contents/ – Naveed Ahmad Jul 16 '13 at 06:28

Manoj Yadav · Answer 3 · 2013-07-16T06:10:47.443

0

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

edited Jul 16 '13 at 06:10

answered Jul 16 '13 at 05:40

Manoj Yadav

6,560
1
23
21

It will remove the actual anchor content, I just want to exclude the anchor when I take the result, my intention is not to touch the original one – Thirumalai murugan Jul 16 '13 at 05:42

score 0 · Answer 4 · answered Jul 16 '13 at 05:41

0

The text is the first childNode:

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

FIDDLE DEMO

answered Jul 16 '13 at 05:41

xdazz

158,678
38
247
274

Sounds good but if any other tags added that will not displayed in this method, I have tried it already – Thirumalai murugan Jul 16 '13 at 05:46
1

@Thirumalaimurugan updated your question then. The HTML, result, and expect result parts. – Behrang Jul 16 '13 at 05:51