Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Поиск элемента по классу (https://javascript.ru/forum/events/16232-poisk-ehlementa-po-klassu.html)

vavich 30.03.2011 22:26

Поиск элемента по классу
 
не спешите критиковать, только учусь

есть вот такой HTML c двумя классами class="con"
<div class="con">text</div>
<div id="tro">
       <div class="co">
            <div class="con">text1</div>
            <div class="foo"></div>
        </div>
</div>


а нужно второму элементу div с классом class="con" добавит еще один элемент

вот пробовал через дочерные элементы
var elems = document.getElementById('tro');
  var elems_child = elems.childNodes;

  for (var key in elems_child)
  {
    var val = some_array[key];
    if(val.className == 'con')
    {
       var select = document.createElement('div');

       val.appendChild(select);
    }
  }


но что то не получаеться так, подскажите правильный путь

walik 30.03.2011 22:38

Во первых ошибка у тя тут:
var val = some_array[key];

Массив с элементами у тебя же elems_child.

Во вторых:
var elems_child = elems.childNodes;

В твоем случае надо:
var elems_child = elems.childNodes[1];


window.onload = function() {
	var elems = document.getElementById('tro');
	var elems_child = elems.childNodes[1];
 
	for (var key in elems_child) {
		var val = elems_child[key];
		if(val.className == 'con') {
			var select = document.createElement('div');
			val.appendChild(select);
		}
	}
}

monolithed 30.03.2011 23:09

walik, for-in в конкретном случае зло!

vavich 30.03.2011 23:15

отладчик пишет ошибку

val is null

а как можно проверить нашло ли совпадение if(val.className == 'con')
пытался в оператор вставить alert('1'); не чего не получилось не сработало

walik 30.03.2011 23:52

<script>
window.onload = function() {
    var elems = document.getElementById('tro');
    var elems_child = elems.childNodes[1];
  
    for (var key in elems_child) {
        var val = elems_child[key];
        if(val.className == 'con') {
            var select = document.createElement('div');
            select.innerHTML = 'added div';
            val.appendChild(select);
        }
    }
}
</script>
<div class="con">text</div>
<div id="tro">
       <div class="co">
            <div class="con">text1</div>
            <div class="foo"></div>
        </div>
</div>

Вот все же работает ?



monolithed,
А почему зло ? И что следует в данном случае использовать ?

monolithed 31.03.2011 00:10

Цитата:

Сообщение от walik
А почему зло ? И что следует в данном случае использовать ?

во-первых, в конкретном случае возможно обойтись и getElelementsByTagName(), во-вторых, for-in самый прожорливый и медленный из всех циклов (в конкретном случае можно заменить на обратный while), в остальном читать тут.

Kolyaj 02.04.2011 19:40

Цитата:

Сообщение от walik
А почему зло ?

for-in не гарантирует порядок перебора, и не гарантирует, что будут перебраны только числовые свойства.

sotik 01.10.2013 11:59

Есть код:
document.onclick = function( e ){
class = e.target.className;
if(class=="strun")alert("хороший");
}

<div class="strun">
мой текст
</div
Нужно,чтоб скрипт не щупал все подряд,а выдавал сообщение только при клике на элементе с заданным классом.Вот так как у меня не выходит,а как правильно?

BETEPAH 01.10.2013 12:15

class - это зарезервированное слово, его в качестве переменных нельзя использовать.
<div class="strun">мой текст</div>
<div class="strun2">мой текст2</div>
<script>
document.onclick = function( e ){
	if(e.target.className == "strun") alert("хороший");
}
</script>

Но вообще, правильнее было бы вешать онклики сразу на нужные классы, а не на весь документ.

sotik 01.10.2013 12:34

Спасибо.Не знал что эту переменную нельзя использовать...
А почему вот так работает:
<div class="strun">мой текст</div>
А вот так нет?
<div class="strun">
<p>1 струна</p>
</div>
Как правильно?


Часовой пояс GMT +3, время: 17:12.