jquery and creating styles, how to check if the style already exists

Question

Hi people i have looked around but cant seem to find the answer i'm looking for.

i have a search page which makes ajax calls, returns json data then creates a style based on the returned data and appends it to the section of the DOM. The creation of the styles is working ok, but if a new search is made the style is duplicated and so my $(#element).slidetoggle() function gets duplicated and the slidetoggle opens and closes immedietly.

ypu can see the page here: http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_jq_keys.php

(use as test data hounslow, north london and from categories: cemeteries) if the same search is made twice the styles for the results gets duplicated, and the slide toggle behaviour is duplicated.)

my question is how do i check if the style is already in existence.

the script that creates the style is as follows:

function makeCSS(id){
        var myUrl = 'getBoroughInfo.php';
        $.ajax({
            url: myUrl,
            type: 'POST',
            data: 'myID='+id,
            dataType: 'json',
            error: function(xhr, statusText, errorThrown){
                // Work out what the error was and display the appropriate message
            },
            success: function(myData){
                var items = myData.boroughs[0];
                //console.log('borough: '+myData.boroughs);

                $("<style type='text/css'> #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} </style>").appendTo("head");
                $("<style type='text/css'> #borough_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; } </style>").appendTo("head");
                $("<style type='text/css'> #searchHead_"+items.Borough_ID+"{ color:#000000; font-weight:bold; background-color:"+items.color+"; opacity: 1.0; cursor: pointer;} </style>").appendTo("head");
                //apply opacity
                //$('#borough_'+items.Borough_ID).css({});
                $('#borough_links').append('<div id="link_'+items.Borough_ID+'">'+items.Borough_Name+'</div>');
                $('#results').append('<div id="searchHead_'+items.Borough_ID+'">'+items.Borough_Name+'</div>');
                $('#results').append('<div id="borough_'+items.Borough_ID+'"></div>');
                $('#link_'+items.Borough_ID).live('click', function(){
                    $('#borough_'+items.Borough_ID).slideToggle('slow', function() {
                        // Animation complete.
                    });
                });
                $('#searchHead_'+items.Borough_ID).live('click', function(){
                    $('#borough_'+items.Borough_ID).slideToggle('slow', function() {
                        // Animation complete.
                    });
                });
            }
        });
    };

this is the line of code that creates one of my styles:

$("<style type='text/css'> #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} </style>").appendTo("head");

so how do i check if this exists in the document already???? a simple if statement would suffice for my needs i think.

Answer 1

You can use :contains selector. e.g:

if($("style:contains('#link_" + items.Borough_ID + "')").length < 1)
{
    $("<style type='text/css'> #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} </style>").appendTo("head"); 
}