How do I get a value of a nested using jQuery?

Question

I want to fetch Span value from below code sample.

<ul style="list-style:none;padding:0px;margin:0px;">
  <li scriptclass="SharePointFileAttachmentContainer" class="a3_KcMvdcLcp51gEaVY_0" id="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0_V1_I1_SPFAC26_SPI124" formid="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0" originalid="V1_I1_SPFAC26_SPI124" viewdatanode="38">
    <span style="" onmouseover="return LeafControl.OnWrappingSpanMouseOver(this, event);" onmouseout="return LeafControl.OnWrappingSpanMouseOut(this, event);">
      <span id="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0_V1_I1_SPFAC26_SPI124_SPFA1" scriptclass="SharePointFileAttachmentItem" class="b_KcMvdcLcp51gEaVY_0 a2_KcMvdcLcp51gEaVY_0 bh_KcMvdcLcp51gEaVY_0" direction="ltr" viewdatanode="39" formid="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0" originalid="V1_I1_SPFAC26_SPI124_SPFA1" style="margin:0px; width: 100%; display:inline-block;">
        <a href="#" style="text-decoration:none; border:none;" onclick="return (SharePointFileAttachmentItem.OnClick(this, event));" onfocus="return (SharePointFileAttachmentItem.OnFocus(this, event));" onkeypress="return (SharePointFileAttachmentItem.OnKeyPress(this, event));">
          <img title="Click here to delete the file. EAMS Masters.docx" alt="Click here to delete the file. EAMS Masters.docx" style="cursor: hand;border:none;vertical-align:middle;margin-right:1px;" src="/_layouts/inc/ipfsfileattachmentdelete.png?rev=yS8PMFXDZDJFrumpJ9CThg%3D%3D">
        </a>
        <span>EAMS Masters.docx</span>
      </span>
    </span>
  </li>
  <li scriptclass="SharePointFileAttachmentContainer" class="a3_KcMvdcLcp51gEaVY_0" id="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0_V1_I1_SPFAC26_SPI125" formid="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0" originalid="V1_I1_SPFAC26_SPI125" viewdatanode="40">
    <span style="" onmouseover="return LeafControl.OnWrappingSpanMouseOver(this, event);" onmouseout="return LeafControl.OnWrappingSpanMouseOut(this, event);">
      <span id="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0_V1_I1_SPFAC26_SPI125_SPFA1" scriptclass="SharePointFileAttachmentItem" class="b_KcMvdcLcp51gEaVY_0 a2_KcMvdcLcp51gEaVY_0 bh_KcMvdcLcp51gEaVY_0" direction="ltr" viewdatanode="41" formid="ctl00_m_g_92fd70a8_aeaf_433d_8f82_e1ead1630fec_FormControl0" originalid="V1_I1_SPFAC26_SPI125_SPFA1" style="margin:0px; width: 100%; display:inline-block;">
        <a href="#" style="text-decoration:none; border:none;" onclick="return (SharePointFileAttachmentItem.OnClick(this, event));" onfocus="return (SharePointFileAttachmentItem.OnFocus(this, event));" onkeypress="return (SharePointFileAttachmentItem.OnKeyPress(this, event));">
          <img title="Click here to delete the file. 123.docx" alt="Click here to delete the file. 123.docx" style="cursor: hand;border:none;vertical-align:middle;margin-right:1px;" src="/_layouts/inc/ipfsfileattachmentdelete.png?rev=yS8PMFXDZDJFrumpJ9CThg%3D%3D">
        </a>
        <span>123.docx</span>
      </span>
    </span>
  </li>
</ul>

From Above code sample I want EAMS Masters.docx and 123.docx this span values. I have multiple <li> like this.

So please suggest me solution in Jquery or Javascript.

Thanks, Digambart

First and foremost, move your inline styles into classes. Then we can start helping you — Dogoku
– Dogoku, Commented Jul 29, 2013 at 12:27

soundswaste · Accepted Answer · 2013-07-29 12:39:41Z

2

If you want each li's 3rd span's content:

var i=1;
$('ul li').each(function(){
    var span_val=$(this).find('span span span').text();
    //code for doing something with span_val
});

working example here : http://jsfiddle.net/s3C2X/1/

edited Jul 29, 2013 at 12:39

answered Jul 29, 2013 at 12:27

soundswaste

3,0943 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fedmich · Accepted Answer · 2013-07-30 00:28:22Z

1

How about doing it like this

spans = $('li[scriptclass="SharePointFileAttachmentContainer"]').find('span[id^="ctl00_m"]').find('span');
console.log( spans );

the breakdown (good for studying)

li tags with attribute of scriptclass
span with ids that begins with ctl00_m
finally find the span inside it.

if you want to loop through each spans found:

spans.each(function(){
    console.log( $(this).text() );
});

Working sample http://jsfiddle.net/fedmich/HdMTH/

edited Jul 30, 2013 at 0:28

answered Jul 29, 2013 at 12:35

fedmich

5,3733 gold badges39 silver badges52 bronze badges

Comments

lexasss · Accepted Answer · 2013-07-29 12:30:14Z

1

var mySpans = $("li span span span");

answered Jul 29, 2013 at 12:30

lexasss

3021 gold badge2 silver badges9 bronze badges

Comments

Adil Shaikh · Accepted Answer · 2013-07-29 12:27:35Z

0

You can do this -

var spans = $('li').map(function(){
       return $(this).find('a').next('span');
});

answered Jul 29, 2013 at 12:27

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

Dipesh Parmar · Accepted Answer · 2013-07-29 12:27:40Z

0

You can do this using below code.

$('li').each(function(){
   $(this).find('span span:last').css('border','1px solid red'); 
});

in above code it will get the first span inside li and inside that span it will get last span so you will have your span as result.

SEE DEMO

answered Jul 29, 2013 at 12:27

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-07-29 12:28:46Z

0

Try

$('li.a3_KcMvdcLcp51gEaVY_0').find('span span span').each(function(){
    console.log($(this).text())
})

Demo: Fiddle

answered Jul 29, 2013 at 12:28

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Kevin · Accepted Answer · 2013-07-29 12:33:29Z

0

Far more elegant solution:

$('li span:nth-child(3)')

Check out the docs

edited Jul 29, 2013 at 12:33

answered Jul 29, 2013 at 12:28

Kevin

2,0221 gold badge16 silver badges10 bronze badges

Comments

Praveen · Accepted Answer · 2013-07-29 12:37:14Z

0

Since you've class a3_KcMvdcLcp51gEaVY_0 for liand a single a anchor tag. You can simple have

   $('.a3_KcMvdcLcp51gEaVY_0 a').next('span').text();

check this JSFiddle

answered Jul 29, 2013 at 12:37

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Collectives™ on Stack Overflow

How do I get a value of a nested <span>using jQuery?

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related