Using jQuery to target tag by style attribute and change it to another tag with a class

Question

Here the is code that I have:

<script> 
  $('span style=“text-decoration:underline;"').replaceWith(function() {
    return $('<h3 class=“classSAmple”/>', {
      html: $(this).html()
    }); 
  });
</script>

Edited, added the \": I need to target the whole span string.

<script>
$("span style=\"text-decoration:underline;\"").replaceWith(function () {
    return $("<h3 class=\"classSAmple\"/>", {
        html: $(this).html()
    });
});</script>

And the problem you're having with that code is...? We'll also need a minimal reproducible example. When does that code execute, in the head, at the end of the page, or in a ready handler? — j08691
– j08691, Commented Aug 29, 2018 at 15:14
@j08691 it executes at the end of the page. The problem is that the span is not changed to h3. — CoolDog
– CoolDog, Commented Aug 29, 2018 at 15:21

Rory McCrossan · Accepted Answer · 2018-08-29 15:29:30Z

Firstly the “ character is invalid JS. You need to use the " double quote character instead.

Secondly selecting an element by its inline style is a really bad idea. If you have absolutely no other choice (which would be selecting by class, id, or even just a hierarchical selector) then you could use the attribute selector or filter(). The latter is far more robust.

Thirdly, note that the exact CSS property you're checking against in this case is text-decoration-line, not just text-decoration as that's a shorthand for several other rules.

Lastly, when you create the new h3 element, if you're going to provide a property list, you need to include all properties in there. You cannot have the class in the element string, then other properties within the object.

With all that said, try this:

var $span = $('span').filter(function() {
  return $(this).css('text-decoration-line') === 'underline';
}).replaceWith(function() {
  return $('<h3 />', {
    'class': 'classSample',
    'html': $(this).html()
  });
});

h3.classSample { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Unaffected</span>
<span style="text-decoration: underline">This is now an h3...</span>
<span>Unaffected</span>

Collectives™ on Stack Overflow

Using jQuery to target tag by style attribute and change it to another tag with a class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related