jquery - Wrap text following a particular element with <p> -
i've got html this:
<div class="text"> <img src="http://placehold.it/50x50"/><a href="http://www.example.com" class="ht">the link</a> element doesn't right, text displays next link </div> <div class="text"> <img src="http://placehold.it/50x50"/><a href="http://www.example.com" class="ht">the link</a> <p>this proper kind of element, want them wrapped in paragraphs or @ least looking they've been wrapped in paragraphs</p> </div>
and wondering if possible make text first example <div>
display below link, wrapping <p></p>
around text, jquery. it's not possible change html because it's user-generated comments kind of project, , can't force user put <p></p>
around text. of them do, of them don't need find solution make them display same.
i've done research , found answer: selecting text following elements using javascript/jquery doesn't answer question that's based on particular fixed structure of text , have text can user inputs , need display below image , link, display on same line. solution: wrap text after particular symbol jquery doesn't work me because there no set html can use identify unwrapped text. one: find text in element not wrapped in html tags , wrap <p> doesn't need because have people using <b></b>
, <i></i>
other things i've tried:
- making image , link have
display:block;
,float:left;
doesn't work because text still displays on same line image , link - making image , link have
display:block;
without float - doesn't work because image , link don't display on same line anymore - using
$("a.ht").next()
select, doesn't work
so if me out i'd grateful, thank you!
edit: here's example of want:
try like:
$('.text').each(function() { var el = $(this).clone().find('img,.ht');//get image , title var text = el.remove().end().html();//remove elements, remaining html $(this).html(el).append('<p>' + text + '</p>');//add p remaining html });
p {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text"> <img src="http://placehold.it/50x50" /><a href="http://www.example.com" class="ht">the link</a> element doesn't right, text displays next link </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text"> <img src="http://placehold.it/50x50" /><a href="http://www.example.com" class="ht">the link</a> element doesn't right, <b>text displays next</b> <i>link</i> </div>
Comments
Post a Comment