Итерация и добавление класса к каждому абзацу

Я пытаюсь добавить класс «игнорировать» к первому P и классу «стиль» для последнего P для каждого блока.Итерация и добавление класса к каждому абзацу

<div class="tiles_large"> 
    <span class="spacer">&nbsp;</span> 
     <p>image here</p> 
    <span class="spacer">&nbsp;</span> 
     <h4>headline here</h4> 
    <span class="spacer">&nbsp;</span> 
     <p>content here</p> 
    <span class="spacer">&nbsp;</span> 
    </div> 

    <div class="tiles_small"> 
    <span class="spacer">&nbsp;</span> 
     <p>image here</p> 
    <span class="spacer">&nbsp;</span> 
     <h4><div><span>headline here</span></div></h4> 
    <span class="spacer">&nbsp;</span> 
     <p>content here</p> 
    <span class="spacer">&nbsp;</span> 
    </div>

Это мой jquery, но он не возвращает ожидаемые результаты.

$(".tiles_large p,.tiles_small p").each(function() { 
    $(this).find("p:first").addClass("ignore"); 
    }); 

    $(".tiles_large p,.tiles_small p").each(function() { 
    $(this).find("p:last").addClass("style"); 
    });

Here is my fiddle

источник

2013-03-15 Evan

Является ли это то, что вы хотите? DEMO. Если это так, вам не нужно использовать функцию .each.

$(".tiles_large,.tiles_small").find("p:first").addClass("ignore").end().find("p:last").addClass("style");

источник

2013-03-15 22:24:27 letiagoalves

это намного более чистый и простой способ сделать это точно. Я думал, что должен использовать функцию .each. спасибо за понимание – Evan

@Evan вы можете сделать это с помощью **. ** и ** ** найти ** функции, но в этом случае это необязательно. Одно из преимуществ (и в то же время неудобства) jQuery заключается в том, что иногда вы можете делать одно дело по-разному – letiagoalves

Я только что понял, когда я вставил свой код на место, когда у меня есть не более двух блоков, скажем, 8 блоков, то мне нужно будет использовать .each – Evan

Это можно сделать так:

$(".tiles_large, .tiles_small").each(function() { 
    $("p:first", this).addClass("ignore"); 
    $("p:last", this).addClass("style"); 
});

источник

2013-03-15 22:25:00 aorcsik

Вы ищете p элемент внутри .tiles_large p и .tiles_small p, в то время как она должна быть просто .tiles_large и .tiles_small.

Обновление, что приводит к this fiddle

$(".tiles_large,.tiles_small").each(function() { 
    $(this).find("p:first").addClass("ignore"); 
}); 

$(".tiles_large,.tiles_small").each(function() { 
    $(this).find("p:last").addClass("style"); 
});

источник

2013-03-15 22:25:36 hjpotter92

человек, я так близко. Это сделал трюк. Я такой идиот. спасибо за понимание моей ошибки. также, хотя в моем примере я предоставил 2 блока, но на самом деле у меня больше, чем всего 2 блока, и это повторяется через все из них – Evan

использования .titles_large p:first,.titles_small p:first и удалить полный .find(...) метод.

источник

2013-03-15 22:25:57

Когда вы проходите через .each, вы применяете функцию повторно к каждому <p>, который подбирается. Думайте, что вы ищете что-то большее, как

$(".tiles_large p:first-of-type,.tiles_small p:first-of-type").addClass("ignore");

который в основном то, что @letiagoalves размещены. Я думаю, first-of-type добавлен в jQuery 1.9. Не уверен, есть ли у него какое-то конкретное преимущество или нет ...

Редактировать: найдено соответствующего thread, в котором говорится о производительности .find("p").eq(0) и какие браузеры могут поддерживать или не поддерживать first-of-type. Узнал что-то новое сам :)

источник

2013-03-15 22:33:14 user1766760

Итерация и добавление класса к каждому абзацу

ответ

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