0

I have a div that will appear on the page at a separate point. It doesn't always appear on the page and can be added via a CMS if needed. There's a line of text that will appear within the body. If the user has decided to have this div added, it would need to be moved into position via jquery. So, I have this text:

<p><strong>Key Facts:</strong></p>

I want to find it using jquery, then move the other div in front of it. I tried a couple of different ways to select this text then move the div in front of it and haven't had any luck. The best way I found to find the text was to do this: 

var foundin = $('*:contains("<p><strong>Key Facts:</strong></p>")');

From that point, to move the div into position, I thought I could something like this:

$('#DivIWantToMove').insertBefore($foundin);

That didn't work, though. I also looked at this:

$( $foundin ).before( $('#DivIWantToMove') );

AS you might imagine, since you're reading this, that didn't work either. So, I'm asking you, is it possible to do what I want? I'm fairly constrained by the CMS that we are using. The DIV I need to move will always be someplace on the page and I have to move it. The client doesn't want to have to add a class to <p><strong>Key Facts:</strong></p> so I'm let with this. If I could have a class on <p> then it would be super easy. I've already done it. The client doesn't like having an extra step. Any ideas?

Jason Shultz
  • 940
  • 1
  • 19
  • 36
  • Do you want to add a class on in

    dynamically whenever the given condition met?

     – Amit Garg Nov 05 '13 at 04:22
  • I don't have to. I just know that, if the class is on the `

    ` initially, it's a cakewalk to move the div in front of it. But, as it stands now, I can select the paragraph, but moving the div in front of it doesn't work. If I add a class to the `

    ` dynamically, would that do the trick you think? I tried an experiment on this page here and it doesn't seem to work. :(

     – Jason Shultz Nov 05 '13 at 04:31
  • one problem is collection of `$('*:contains(...')` will return every parent up the tree from that text. Is it always in a `` tag? Always in `

    ` tag too?

     – charlietfl Nov 05 '13 at 05:01
  • That one particular string should only appear once on the page. I'm looking for that one particular block of HTML and if it's not there then I won't place the doc on the page. – Jason Shultz Nov 05 '13 at 05:24

1 Answers1

1

I think contains selector only looks for text, not html tags. so you have to modify your contains selector. if your html is like this -

<div>
    <p><strong>Key Facts:</strong>
    </p>
</div>
<div id="move">something something</div>

and you want to move your <div id='move'> in front of p, then try this -

var foundin = $('p:contains("Key Facts")');
var divtomove = $('div#move');
foundin.before(divtomove);

Demo

Update also look into this QA: jQuery :contains with html. Instead of using contains you can use one of the methods from there.

Community
  • 1
  • 1
th1rdey3
  • 4,176
  • 7
  • 30
  • 66