Inline jQuery script inside the page

Question

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.

Answer 1

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 accomplish 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>