如何用Jquery替换特定的li内容？

Question

<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>标记内<li>标记<a>标记$( '.widget_ex_attachments a[href*=".doc"]' ).parent('li').replaceWith( '<i class="fa fa-file-pdf-o"></i>' ); 标记为＆＃34; href＆＃34;包含字符串＆＃34; .doc＆＃34;。

更有意义的是，这就是我所做的：

<li>

- 问题当然是整个<i>内容已被新的$( '.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>' ); 标记取代。 我试过了：

{{1}}

- 它没有用......

请有人告诉我如何定位此标记元素。谢谢。

Answer 1

尝试：

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

Answer 2

您可以使用find method获取i中的li元素：

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

你也可以使用prev method从链接移动到上一个元素（当然假设它总是在那里）：

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

另一种方法是使用has method查找包含该链接的li元素：

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

Answer 3

尝试查找：

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

看到它的实际效果：

http://jsfiddle.net/58ardu6h/