Finding tags within tags in jquery and replacing content

Question

I have four article tags in my html page with the class col. Inside each article I have a div with the class heading. Inside of that I have an img tag.

I'm trying to iterate through each artcle and remove that image tag and replace with some different html.

This in Wordpress, hence the funky jquery function wrapper.

Right now im just trying to get the finding and replacing working (below) - I haven't attempted the different code for each article bit yet. I can't figure out why the below doesn't work.

(function ($) {
  $(document).ready(function() {
    $('article.col').each(function(el) {
      $((el).find('heading img').replaceWith('<newtag>somecode</newtag>'));  
    });
  });
 }(jQuery));

Nope, it wasn't, i have added that back in- although it still calling the same error. — Adam
– Adam, Commented Apr 30, 2013 at 0:09

Karl-André Gagnon · Accepted Answer · 2013-04-30 00:14:37Z

2

When calling each, the function value are function(index, element). So right now, you are trying to search a number with $(el), try $(this) or add an other argument to your function.

also, the dot is missing for the class heading

$('article.col').each(function(index, el) {
   $(el).find('.heading img').replaceWith('<newtag>somecode</newtag>');  
});

or

$('article.col').each(function() {
    $(this).find('.heading img').replaceWith('<newtag>somecode</newtag>');  
});

answered Apr 30, 2013 at 0:14

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Over a year ago

Thanks! This worked and found all the tags. I assume if I want a different newtag for each one it finds, I would use the index and pass in a number, so 0 for the first article it finds, 1 for seconds, etc.

Casey Dwayne · Accepted Answer · 2013-04-30 00:07:07Z

0

(function ($) {
  $(document).ready(function() {
    $('article.col').each(function(el) {
       $(this).find('heading img').replaceWith('<newtag>somecode</newtag>');  
   });
  });
 }(jQuery));

Btw, the jQuery wrapper is to prevent conflicts with other libraries using the $ symbol.

answered Apr 30, 2013 at 0:07

Casey Dwayne

2,1691 gold badge17 silver badges33 bronze badges

1 Comment

Adam Over a year ago

Thanks kcdwayne. I'm not getting any errors anymore, but its not doing anything. Am I searching for the tags correctly in that find statement, or is it just looking for the words "heading img"?

Aaron K · Accepted Answer · 2013-04-30 00:19:52Z

0

There are a few problems with the syntax,

$(el.find('heading img').replaceWith('<newtag>somecode</newtag>'));

should be

$(this).find('heading img').replaceWith('<newtag>somecode</newtag>');

see this fiddle:

http://jsfiddle.net/5bEq7/1/

edited Apr 30, 2013 at 0:19

answered Apr 30, 2013 at 0:13

Aaron K

4394 silver badges10 bronze badges

1 Comment

Aaron K Over a year ago

Sorry I did something dumb, edited to remove a superfluous $(..)

Collectives™ on Stack Overflow

Finding tags within tags in jquery and replacing content

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related