JQUERY AJAX for each loop custom attributes

Question

This question is related to another one I asked yesterday and its link is: Parse HTML in jquery through ajax into elements and replace each corresponding on page

Basically i want to call a php page with ajax and replace the elements in the response with the corresponding ones on the page. I got the following function in an answer:

 $(data ).filter('.maindiv').each(function (index) 
  /* "this" is the current div in response*/          
  $('#'+this.id).replaceWith(this);
 });

The above function woeks well when the div I want to replace has a regular id= but if use a custom attribute like gid= for example it won't work. How can i fix this??

Thanks

you should consider using the data- attribute introduced with html5 for custom attributes — Jan Hommes
– Jan Hommes, Commented Feb 8, 2013 at 12:59
I don't quite understand you. You are asking how to select the divs that are already on the page using something other than the id? You can take a look at this: api.jquery.com/category/selectors — Pablo
– Pablo, Commented Feb 8, 2013 at 13:00
nope...some elements on the page have the attribue id and some have the attribure gid but both have class called maindiv so when i call the php i want to get what's in there and replace items that match on the html...if an element has <div id='1' class='maindiv' it should replace this and if an element has <div gid='1' class='maindiv' it should replace the one with the same class and attribute and so on — Michael Samuel
– Michael Samuel, Commented Feb 8, 2013 at 13:34

Adil · Accepted Answer · 2013-02-08 12:57:33Z

2

Use attr for custom attribute instead of using this.id you can use $(this).attr("YourAttr");

$(data ).filter('.maindiv').each(function (index) 
   /* "this" is the current div in response*/          
    $('#'+$(this).attr('gid')).replaceWith(this);
});

answered Feb 8, 2013 at 12:57

Adil

148k25 gold badges217 silver badges207 bronze badges

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

2 Comments

MCL Over a year ago

"when the div I want to replace has a regular id= but if use a custom attribute like gid..." It seems to me like you have it backwards there. You need to select by the custom attr. Edit: Roger C's answer shows what I meant.

Michael Samuel Over a year ago

the div in the PHP page is <div gid='4' class='maindiv' so I want to replace the one matching on the html page which is also <div gid='4' class='maindiv' but instead it replaces <div id='4' class='maindiv' so don't know why it does that

Roger C · Accepted Answer · 2013-02-08 13:03:09Z

1

You can select node with a gid attribute with:

$('[gid]').replaceWith(this);

you can even be more precise by selecting only the node which has the gid value you want

$('[gid="hello"]').replaceWith(this);

Hope it helps

answered Feb 8, 2013 at 13:03

Roger C

3051 silver badge5 bronze badges

3 Comments

Michael Samuel Over a year ago

I think something wrong it here...i tried $('.maindiv[gid]').replaceWith(this);. It's replacing the correct div but it's replacing it twice....i don't know why it does that...also tried now $('.maindiv[id]').replaceWith(this); but it's replacing all .maindiv that have the attribute id without matching the same id

Michael Samuel Over a year ago

how to make sure the response matches only the same id or gid??

Roger C Over a year ago

Something like that should work $('[gid="' + $(this).attr('gid') + '"]').replaceWith(this);

Kees C. Bakker · Accepted Answer · 2013-02-08 13:01:30Z

0

For data you can use a custom attribute. HTML5 specificies the use of a data- attribute. The cool thing is that this works in HTML4 too! jQuery can read it by using the data method.

I'll recommend:

<div class="maindiv" data-grid="myGrid">...</div>

$(data).filter('.maindiv').each(function (index)        
     $('#'+$(this).data('gid')).replaceWith(this);
});

answered Feb 8, 2013 at 13:01

Kees C. Bakker

33.6k31 gold badges120 silver badges208 bronze badges

Collectives™ on Stack Overflow

JQUERY AJAX for each loop custom attributes

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related