Is it not possible to run jQuery in the middle of a page (inline)?

I tried to run this code inside a custom WordPress template....

<script type="text/javascript">
jQuery(document).ready( function() {
  jQuery(".upb_row_bg").css("filter","blur(30px)");
});
</script>

However it seems to have no affect on the element in question. In fact if cannot even select the element - console.log('jQuery(".upb_row_bg).length; shows 0.

If I put the same code right before the closing tag after the wordpress wp_footer() function, it works. If I place it before wp_footer, then it does not.

Any ideas? I have another script on another page where I was able to use a simple inline script that is generated by a wordpress filter...

<script>jQuery( "figure" ).replaceWith( "<div class=\”new-class\”>” + jQuery( "figure" ).html() + "</div>" );</script>

This works as expected even though with this snippet there is no event to trigger it, it just runs and replaced the preceding element. So inline scripts must work.

I am a bit confused.

Is it not possible to run jQuery in the middle of a page (inline)?

I tried to run this code inside a custom WordPress template....

<script type="text/javascript">
jQuery(document).ready( function() {
  jQuery(".upb_row_bg").css("filter","blur(30px)");
});
</script>

However it seems to have no affect on the element in question. In fact if cannot even select the element - console.log('jQuery(".upb_row_bg).length; shows 0.

If I put the same code right before the closing tag after the wordpress wp_footer() function, it works. If I place it before wp_footer, then it does not.

Any ideas? I have another script on another page where I was able to use a simple inline script that is generated by a wordpress filter...

<script>jQuery( "figure" ).replaceWith( "<div class=\”new-class\”>” + jQuery( "figure" ).html() + "</div>" );</script>

This works as expected even though with this snippet there is no event to trigger it, it just runs and replaced the preceding element. So inline scripts must work.

I am a bit confused.

• javascript
• jquery
• wordpress

Share Improve this question Follow edited Nov 3, 2022 at 15:08 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Nov 12, 2017 at 21:49 Chris HawkinsChris Hawkins 45133 gold badges1111 silver badges2222 bronze badges 7

• Does it throw any errors? Is .upb_row_bg a static element already present or is it generated dynamically? – agrm Commented Nov 12, 2017 at 21:53
• It is static (well generated by a WordPress plugin). There are no errors in the console. – Chris Hawkins Commented Nov 12, 2017 at 21:59
• 1 well seems that the .upb_row_bg element is not "printed" to the DOM by the time you run the code. – Sagiv b.g Commented Nov 12, 2017 at 22:05
• Make sense. Anyway to test that? – Chris Hawkins Commented Nov 12, 2017 at 22:08
• Best practice is to put the scripts right before the closing </body> tag for reasons like this. You can test this by creating a static HTML file with a single <p> element in the body. Then run console.log($('p').length) once before the element and once after. The results should show 0 and 1. – agrm Commented Nov 12, 2017 at 22:11

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 0

Your syntax looks strange.

<script type="text/javascript">
$(document).ready(function() {
  $('.upb_row_bg').css('filter', 'blur(30px)');
});
</script>

'figure' does not look like a valid selector, use a class or ID.

As far as what you're trying to acplish with your second code snippet just do:

<script>$('#figure').addClass('new-class')</script>

---

Or, if you really need figure to be out of the question

<script>$('.figure').addClass('new-class'); $('.new-class').removeClass('figure')</script>