получить элемент по имени класса

Question

Я хочу знать, как получить элемент по имени класса, это HTML код

<div class="header" id="parent"> 

     <div class="child"></div> 
      <div class="head_container"> 
       <img src="images/logo_picture.png" alt="" title="" class="logopic" /> 
       <img src="images/logo_text.png" alt="" title="" class="logotext" /> 
       <img src="images/head_line.jpg" title="" alt="" class="head_line" /> 

      </div> 

    </div> 

Это JQuery, и это проблема, у меня есть код с getEelementById, но я хочу с помощью getElementByClass. Это метод использования непрозрачности для любого элемента и предотвращения формирования дочерних элементов, наследующих непрозрачность. Я буду использовать пять или шесть раз, родительский класс, так что мне нужно методу getElementByClass

$(document).ready(function() { 

function thatsNotYoChild(parentID) { 

    var parent   = document.getElementById(parentID), 
     children   = parent.innerHTML, 
     wrappedChildren = '<div id="children" class="children">' + children + '</div>', 
     x, y, w, newParent, clonedChild, clonedChildOld; 

    parent.innerHTML = wrappedChildren; 
    clonedChild = document.getElementById('children').cloneNode(true); 
    document.getElementById('children').id = 'children-old'; 
    clonedChildOld = document.getElementById('children-old'); 
    newParent = parent.parentNode; 

    newParent.appendChild(clonedChild); 
    clonedChildOld.style.opacity = '0'; 
    clonedChildOld.style.filter = 'alpha(opacity=0)'; 

    function doCoords() { 
     x = clonedChildOld.getBoundingClientRect().left; 
     y = clonedChildOld.getBoundingClientRect().top; 
     if (clonedChildOld.getBoundingClientRect().width) { 
     w = clonedChildOld.getBoundingClientRect().width; // for modern browsers 
     } else { 
     w = clonedChildOld.offsetWidth; // for oldIE 
     } 

     clonedChild.style.position = 'absolute'; 
     clonedChild.style.left = x + 'px'; 
     clonedChild.style.top = y + 'px'; 
     clonedChild.style.width = w + 'px'; 
    } 

    window.onresize = function() { 

     doCoords(); 

    }; 

    doCoords(); 

} 


thatsNotYoChild('parent'); 
}); 

Answer 1

Я хочу знать, как получить элемент по имени класса

Просто используйте getElementsByClassName

Answer 2

Почему не вы просто используйте jquery?

$(".class").css({opacity:1}); 

Решение вашей проблемы:

То, что вы хотите сделать, это невозможно. Ребенок всегда наследует непрозрачность родителя. Это делает для меня личный смысл.

Что вы можете сделать, это сделать два фоновых изображения с различной прозрачностью прозрачности и переключить фоновое изображение с помощью jquery, istead, чтобы изменить непрозрачность.

Вы понимаете? Это единственный способ добиться того, чего вы хотите.

$(".class").css({"background-image":"url('opacity-0.png')"}); 
$(".class").css({"background-image":"url('opacity-1.png')"}); 

Answer 3

Используйте селектор классов. JQuery использует селекторы, аналогичные CSS, так:

$('.child') 

будут выбраны все элементы с классом child.

Для идентификаторов, префикс ID с # характер:

$('#parent') 

Answer 4

Вот живой пример, который показывает, как выбрать класс элементов:

Working jsFiddle example

HTML:

<div class="header" id="parent"> 
    <div class="child"></div> 
    <div class="head_container"> 
     <img src="http://placehold.it/50x50" alt="" title="" class="logopic" /> 
     <img src="http://placehold.it/50x50" alt="" title="" class="logotext" /> 
     <img src="http://placehold.it/50x50" title="" alt="" class="head_line" /> 
    </div> 
</div> 
<input type="button" id="mybutt" value="Click Me"> 

JavaScript/JQuery:

//Gets any div when clicked 
$('div').click(function(e) { 
    alert('Class name is: ' + $(this).attr('class')); 
    e.stopPropagation(); 
}); 

//Gets any div with class="child" when clicked 
$('.child').click(function(){ 
    alert('You clicked the CHILD div'); 
}); 

//When click button, makes div with class="child" turn red 
$('#mybutt').click(function(){ 
    $('.child').css({'background-color':'red'}); 
});