Получить HTML-элемент, используя jQuery

Question

У меня есть несколько DIV с идентификатором "div1", "div2" ... "divx". Я хочу сделать операцию на них. Есть ли способ получить идентификатор элемента .contains "div". Любая другая идея?

Answer 1

Можно использовать запускается с селектора

$("div[id^='div']")

Вышеприведенное захватит все div, которые имеют атрибут id, который начинается с букв div.

Пример jsFiddle , который делает все div с id div... невидимыми.

---

Вот как справиться с более сложным случаем, если вы хотите сопоставить div, за которым следует число, но не div, за которым следует что-то еще. Так что div1 будет соответствовать, но divx не будет.

В этом случае мы используем filter () с функцией. Функция должна возвращать true, когда мы хотим совпадение, и false, когда мы этого не делаем. match () и регулярное выражение отлично подходит для этого (вы можете использовать [0-9] для представления цифры в регулярном выражении или более простое [\d]):

$("div").filter(function() {
    return $(this).attr("id").match(/^div[\d]+$/)
})

attr () возвращает значение указанного атрибута, в данном случае id.

Пример jsFiddle , при котором все div, за которыми следует число, исчезают, но не div, за которыми следуют другие.

Answer 2

Вы можете использовать это (хотя я не проверял это):

jQuery("div[id^='div']")

Это получит все div элементы, которые имеют id, начинающиеся с "div".

Если вы хотите, чтобы все div элементы имели id , содержащий"div", то вы можете использовать это:

jQuery("div[id*='div']")

Answer 3

Использование идентификаторов вроде div1, div2, div3 - плохая практика.Это как назвать ваши классы "black-bold-12px", а затем назначить эти стили этому классу.Это упускает из виду семантику.

Правильный способ сделать это - использовать класс для всех из них.

Элементы могут иметь более одного класса, используя пробел в качестве разделителя:

<div class="something usethis">...</div>
<div class="usethis something_else">...</div>
<div class="usethis">...</div>
<div class="something anotherclass usethis" id="someId">...</div>

<script>
  $(".usethis").html("New contents for all of them!");
</script>