Q:

How to replace a specific li content with Jquery?

<div class="widget_ex_attachments">
    <ul>
            <li>
            <i class="fa fa-file-word-o"></i>
            <a href="uploads/2014/09/Parellel-universe.docx">Parellel universe</a>
            </li>

            <li>
            <i class="fa fa-file-word-o"></i>
            <a href="uploads/2014/09/The-List-v5.6.xls">The List v5.6</a>
            </li>

            <li>
            <i class="fa fa-file-word-o"></i>
            <a href="uploads/2014/09/cv.pdf">cv</a>
            </li>
   </ul>
</div>

I want to target only <i> tags that are inside an <li> tag that has <a> whose "href" contains string ".doc".
To make more sense, this is what I did:
$( '.widget_ex_attachments a[href*=".doc"]' ).parent('li').replaceWith( '<i class="fa fa-file-pdf-o"></i>' );

-the problem, of course, is that whole <li> content was replaced with new <i> tag.
I have tried:
$( '.widget_ex_attachments a[href*=".doc"]' ).parent('li:first').replaceWith( '<i class="fa fa-file-pdf-o"></i>' );
$( '.widget_ex_attachments a[href*=".doc"]' ).parent('li:first-child').replaceWith( '<i class="fa fa-file-pdf-o"></i>' );
$( '.widget_ex_attachments a[href*=".doc"]' ).parent('li i').replaceWith( '<i class="fa fa-file-pdf-o"></i>' );

-none of it works...
Can someone, please, tell me how do I target this tag element. Thank you.

A:

Try find :
$('.widget_ex_attachments a[href*=".doc"]' ).parent('li').find('i').replaceWith( '<i class="fa fa-file-pdf-o"></i>' );

See it in action :
http://jsfiddle.net/58ardu6h/

