2015-06-03 6 views
0

Я хочу удалить некоторые атрибуты элементов из div. Мои divs генерируются автоматически. Я хочу перебирать каждый div и дочерние divs и хочу удалить все font-size (font-size: Xpx) и size, которые внутри font tag <font size="X">.Удаление размера и размера шрифта из дочерних элементов

Это примеры моего div.

<div id="headline" class="headline" style="position: word-break: break-all; background-color: rgb(90, 88, 84); width:300px;height:250px"> 
    <div style="text-align: center; font-size: 12px; color: rgb(1, 69, 18);"> 
    <div> 
     <div> 
     <font color="#ffffff" size="6" > 
      <b>This is&nbsp;</b> 
     </font> 
     <b style="color: rgb(255, 255, 255); font-size: xx-large;">a Test&nbsp;</b> 
     </div> 
    </div> 
    <div> 
     <div> 
     <b style="color: rgb(255, 255, 255); font-size: xx-large;">Demo&nbsp;</b> 
     </div> 
    </div> 
    <div> 
     <b style="color: rgb(255, 255, 255); font-size: xx-large;">csa</b> 
    </div> 
    </div> 
</div> 

ИЛИ

<div id="headline" class="headline" style="position: absolute; width: 186px; height: 50px; "> 
    <div style="text-align: center; font-size: 12px; color: rgb(249, 249, 251);"> 
    <span style="color: rgb(255, 204, 153);"> 
     <font size="4">Expansion Pack</font> 
    </span> 
    </div> 
</div> 

Я читаю дивы нравится.

$('#headline').find('*').each(function() { 
    // font-size remove 
    //size inside tag remove 
}); 

Но как я могу удалить размер шрифта и размер, если они находятся в дочернем элементе, иногда только размер шрифта присутствуют и нет <font> тег

ответ

2

Я думаю, что вы должны быть более явно с вашими селекторами. Что-то вроде этого должно работать:

// Select all elements with a style attribute that contains font-size, and 
// remove the inline font-size property 
$('[style*="font-size"]').css('font-size', ''); 

// Select all font elements with a size attribute, and 
// remove the size attribute 
$('font[size]').removeAttr('size'); 

Возможно, вы захотите сделать селектора более конкретными, чтобы избежать изменения содержимого неожиданно. Например:

$('#headline [style*="font-size"]').css('font-size', ''); 

Примечание: Это решение использует jQuery attribute selectors.

EDIT: Просмотреть комментарии от Charlie о производительности. Селекторы атрибутов намного медленнее, чем у большинства других селекторов, но я бы сказал, что в большинстве случаев различия скорости не будут иметь значения.

+0

Кажется законным. +1 при использовании правильного селектора. OP должен узнать больше о селекторах, таких как селектор атрибутов и т. Д., И использовать дикие карты, может быть, разработать конструкцию селектора, если у вас появится шанс. Может быть, поговорим о хите производительности, который принимает такой сложный селектор. – Charlie

+0

Это хорошо работает спасибо – user3754676

+0

@Charlie - Спасибо! Я добавил ссылку на документы. Знаете ли вы о заметных проблемах с производительностью с помощью селекторов атрибутов jQuery или это просто общее утверждение о сложных селекторах? –

-1

пытаются петли те элементы, которые получили 'размер шрифта':

$('div').each(function(){ 
    $(this).css('font-size', ''); // set the value as empty string 
)}; 

$('b').each(function(){ 
    $(this).css('font-size', ''); 
)}; 

см jQuery Documentation on CSS.

+0

Слишком широкий. Зачем вам перебирать каждый div? Понятно, что он должен иметь по крайней мере некоторую форму охвата. – Charlie

+0

легко изменить $ ('div') до $ ('# headline div') ... извините за мою неосторожность ... – nk147ch

Смежные вопросы