Проблема с селектором JQuery h2

Question

У меня проблемы с получением моего селектора JQuery для доступа к определенному элементу HTML.

У меня есть тег <h2>, из которого я пытаюсь удалить класс CSS, а затем добавить в него новый, основываясь на некоторых действиях пользователя.

My <h2> CSS определяется как:

html .image_thumb ul li h2 {
    color : #ffffff;
    font-size: 1.5em; 
    margin: 5px 0; padding: 0;
}

Мой фрагмент HTML выглядит так:

'<div id="div_image_thumb" class="image_thumb">
<ul>
    <li class="LI1">
        <a href="./images/sample1.jpg"></a>
        <div class="block">
            <h2>This is my header</h2>
            <small>Lorem Ipsum Article Titles Running </small>
            <p>Lorem Ipsum Details...<br /><a href="" target="_blank">Read More</a> </p>
        </div>
    </li>

и т.д ...

Мой вызов JQuery выглядит так:

$("div#div_image_thumb ul .LI1 div h2").removeClass();

но это не удаляет класс. Есть идеи?

Answer 1

Это не ваша проблема, но вам нужно передать параметр в removeClass(). Как:

$('#foo').removeClass('active');

Измените свой CSS, чтобы фактически назначить класс h2, например:

html .image_thumb ul li h2.myClass{ 
    color : #ffffff; 
    font-size: 1.5em; 
    margin: 5px 0; 
    padding: 0; 
}

Изменить это:

<h2>This is my header</h2>

к этому:

<h2 class="myClass">This is my header</h2>

И пусть jQuery сделает это:

$("div#div_image_thumb ul .LI1 div h2").removeClass('myClass');

Дай попробовать - удачи

Answer 2

Какой класс вы пытаетесь удалить?

h2 не имеет классов, связанных с ним для начала.

Может быть, изменить строку CSS, применить эти стили через некоторый класс и добавить этот класс в h2 в исходном коде HTML?

html .image_thumb ul li h2.startclass { color : #ffffff; font-size: 1.5em; margin: 5px 0; padding: 0; }

Тогда:

<div id="div_image_thumb" class="image_thumb">
<ul>
        <li class="LI1">
                <a href="./images/sample1.jpg"></a>
                <div class="block">
                        <h2 class="startclass">This is my header</h2>
                        <small>Lorem Ipsum Article Titles Running </small>
                        <p>Lorem Ipsum Details...<br /><a href="" target="_blank">Read More</a> </p>
                </div>
        </li>

Answer 3

Ваш селектор неверен. Попробуйте

div#div_image_thumb ul li.LI1 div h2

Я бы порекомендовал упростить это, хотя бы. Почему не просто

".li1 h2"

Answer 4

Вы пытаетесь удалить класс, который фактически не назначен вашей H2.

Свойства css определены для <h2> элементов в определенном месте, но там не определено фактическое имя класса. Лучше всего использовать метод jQuery.css () и установить индивидуальные свойства стиля.

В качестве альтернативы вы должны использовать jQuery.addClass и назначить группу стилей для вашего элемента H2, которые переопределяют значения по умолчанию.

Answer 5

1001 * попробовать *

$("#div_image_thumb div.block > h2").removeClass(); 

Я повторю то, что все остальные уже сказали - у этого элемента <h2> не определен атрибут класса.

Answer 6

кажется ненужным длинным селектором, попробуйте

$(".block > h2").removeClass();

и да, jimyi прав, ваш h2 не имеет атрибута класса в фрагменте, который вы отправили