Well, time for the second chapter...
Then, at this point we've identified the two elements we need to achieve our goal:
1.-
p.name, destination point.
2.-
.meta > strong:contains('Phone:'), this we need to move it after destination point.
However, still something to take into acount now: we don't want to move only the strong element, but the whole div where it is inserted. Maybe that div has a pretty style that we want for that custom field...
So, we need to identify that div. Again, no ID, only the class "meta", shared by all the custom fields. The solution is in another method of jQuery:
$(".meta > strong:contains('Phone:')").
parents('.meta')This is a possible selector for the div with class "meta" containing the strong we are interested in. parents() finds the immediate parent matching its contents.
And seems that now, finally, we are ready to make the moving:
$("p.name").append($(".meta > strong:contains('Phone:')").parents('.meta'));
Success! jQuery method "append" moves the custom field div after the paragraph with the name of the user.
Only problem now is that these two elements were never designed to appear side by side, so the look of it is a bit ugly. We'll fix that applying a couple of CSS changes:
First, we get rid of the bold style in Custom field name:
$(".meta > strong:contains('Phone:')").css('font-weight', 'normal');
and then we add a bit of separation between the paragraph "name" and the div ".meta".
$(".meta > strong:contains('Phone:')").parents('.meta').css('padding-top', '5px');
The whole code at this point:
<script type="text/javascript">
$(document).ready(function(){
$("p.name").[b]append[/b]($(".meta > strong:contains('Phone:')").parents('.meta'));
$(".meta > strong:contains('Phone:')").css('font-weight', 'normal');
$(".meta > strong:contains('Phone:')").parents('.meta').css('padding-top', '5px');
});
</script>
And this is where you may tell yourself "mission accomplished" and go for the next headache on your list
or you could choose to optimize the code so it would consume less time and resources of the user device.
Right now we have three ".meta > strong:contains('Phone:')". Why is this relevant? Because every time the interpreter in the browser finds a complicated selector like ".meta > strong:contains('Phone:')" it needs to look in the whole code for the elements that match it. So, the less, the better.
We can assign the result of this complicated search to a variable and the process would be done just once:
var phone = $(".meta > strong:contains('Phone:')");
...use that
variable as selector:
<script type="text/javascript">
$(document).ready(function(){
var phone = $(".meta > strong:contains('Phone:')");
$("p.name").append(phone.parents('.meta'));
phone.css('font-weight', 'normal');
phone.parents('.meta').css('padding-top', '5px');
});
</script>Something more that might be optimized yet? It seems so: There is still a repeated selector:
phone.parents('.meta')We could assign it to another variable again, but we can do it with jQuery, so:
$("p.name").append((phone.parents('.meta').css('padding-top', '5px')));
At the same time we are moving with "append" we take advantange and make the style change ("padding-top") to the div .meta.
The
final code (at last
):
<script type="text/javascript">
$(document).ready(function(){
var phone = $(".meta > strong:contains('phone:')");
$("p.name").append((phone.parents('.meta').css('padding-top', '5px')));
phone.css('font-weight', 'normal');
});
</script>Well, as promised, first and last time I do this...
Hope it will be useful to people around.
Regards
