Как добраться до нужного элемента?

Question

[saplas]

У меня есть
два одинаковых блока

<div class="bx-filter-parameters-box-title " onclick="smartFilter.hideFilterProps(this)">
	<span class="bx-filter-parameters-box-hint ">Бренд
               <i data-role="prop_angle" class="fa fa-angle-up"></i>
	</span>
</div>

и

<div class="bx-filter-parameters-box-title " onclick="smartFilter.hideFilterProps(this)">
	<span class="bx-filter-parameters-box-hint ">Вид
               <i data-role="prop_angle" class="fa fa-angle-up"></i>
	</span>
</div>

Мне нужно чтобы по клику на кнопку за пределами этого блока сменилась надпись только "Бренд", и по клику на другую кнопку сменилась надпись только у "Вид"
Как мне указать что именно этому элементу нужно поменять html, учитывая что там одинаковые классы?

Comments

[twobomb]

Добавить не одинаковые классы?

[saplas]

twobomb, Это очевидно, но без этого можно как-то?

[twobomb]

saplas, Ну по индексу, если они не меняются, ну не вижу в этом смысла. Проще добавить классы и всё

Answer 1

[kulaeff]

Если вы не хотите менять имена классов или добавлять вспомогательные, то используйте псевдо-классы: :first-child, :last-child, :nth-child(expression) и прочие.

Другими словами, первый блок можно взять так:
.bx-filter-parameters-box-title:first-child

Последний блок:
.bx-filter-parameters-box-title:last-child

Answer 2

[ma4t]

по-моему можно проверить значение в теге, смотря что Вы используете. Например в jquery , можно достичь методом text() этого.
Грубо так

if ($('.bx-filter-parameters-box-hint').text() === 'Бренд') {
  $('.bx-filter-parameters-box-hint').text('Олала')
}

Возможно нужен метод html() плохо уже помню jquery