2013-04-05 23 views
8

w funkcji potrzebuję sprawdzić, czy (div, span, p) zawiera jakiekolwiek elementy .html w nim przed próbą usunięcia html i dodać nową zawartość.Jak sprawdzić, czy element zawiera kod HTML przed usunięciem? jQuery

Nie wiesz, jak to zrobić ...

Próbowałem to, ale nie działa:

// HERE below I tried to do a check to see if the div's have HTML, but did not work 
    if ($('.'+rowName+' div').html) { 
     $('.'+rowName+' div').html.remove(); 
     $('.'+rowName+' span').html.remove(); 
     $('.'+rowName+' p').html.remove(); 
    } 

Pełna funkcji

// Create the Role/Fan rows 
function rowMaker (rowName, roleName) { 
    //alert(rowName+' '+roleName); 

    // HERE below I tried to do a check to see if the div's have HTML, but did not work 
    if ($('.'+rowName+' div').html) { 
     $('.'+rowName+' div').html.remove(); 
     $('.'+rowName+' span').html.remove(); 
     $('.'+rowName+' p').html.remove(); 
    } 

    // Blue button 
    $('.'+rowName+' div').append(roleName); 
    $('.'+rowName+' div').attr('id', 'blue-fan-'+roleName); 
    var blueButton = ('blue-fan-'+roleName); 
    console.log('blueButton = '+blueButton); 

    // Genres 
    $('.'+rowName+' span').append(roleType); 

    // Tags 
    $.each(role_Actor, function(index, item) { 
     $('.'+rowName+' p').append(item+', '); 
    }); 

    $('#'+blueButton).click(function() { 

     console.log('clicked blue button'); 

     // clears the role_Actor to be used to recapture checkboxes 
     role_Actor = []; 

     console.log('role_Actor = '+role_Actor); 

     //$('#modal-'+roleId).modal(); 
     $('#modal-'+roleId).modal({persist:true}); 
     return false; 
    }); 

} 
+0

Czy to naprawdę ma znaczenie, jeśli element ma kod HTML, jeśli zamierzasz go usunąć? Dlaczego po prostu nie zastąpić zawartości w całości [.html'] (http://api.jquery.com/html)? –

+0

Och, ponieważ coś użytkownik uderzy w ten przycisk, uruchom funkcję, a niebieski przycisk nie został jeszcze stworzony ... więc nie ma żadnego .html do usunięcia i wyrzucenia i błędu na konsoli :(może zamiast usunąć czy jest jakieś jasne wywołanie, które mogę wykonać? hmm patrząc teraz –

Odpowiedz

12

html to nie metoda właściwość, ty musisz użyć (), następnie możesz użyć właściwości obiektu String do sprawdzenia długości zwróconego łańcucha html:

if ($.trim($('.'+rowName+' div').html()).length) { 
    // $('.'+rowName).find('div, p, span').remove(); 
    $('.'+rowName).find('div, p, span').empty(); 
} 

Uwaga: jeśli chcesz zmienić zawartość HTML elementu, nie ma potrzeby usuwania aktualnej zawartości HTML. Metoda html zastępuje bieżącą treść HTML.

5

Sprawdź długość dzieci.

if($('.'+rowName+' div').children().length > 0) 
+1

'.children()' nie zwróci węzłów tekstowych – jmar777

+1

@ jmar777 ... Jestem prawie pewien, że o to chodzi. –

1

Spróbuj

if ($('.'+rowName+' div').html().length > 0) { 
     $('.'+rowName+' div').empty(); 
     $('.'+rowName+' span').empty(); 
     $('.'+rowName+' p').empty(); 
} 
2

Można użyć .html() na to (i rozliczania spacji):

var $row = $('.rowName'); 

if (!$row.find('div').html().trim().length) { 
    $row.find('div, span, p').empty(); 
} 
0

Plain Vanilla JavaScript powinno wystarczyć zbyt.

if(document.querySelectorAll('.'+rowName+' div')[0].childElementCount > 0){ 
    console.log("found"); 
} 
Powiązane problemy