如何從javascript中的父元素獲取特定的子元素

嗨我在我的項目中使用JavaScript，當然它是新的，在某些情況下，我想要獲取子元素的父元素的ID，所以我只能改變那個孩子的css類。如何從javascript中的父元素獲取特定的子元素

代碼：

<div id="section_container" class="col-md-3 section_container " onclick="handler(this)"> 
     <div id="content" class="col-md-10 leftone ">Make a complaint</div> 
     <div class="rightone col-md-2"> 
      <img id="arrow" class="arrow-image"> 
     </div> 
    </div> 
    <div id="section_container" class="col-md-3 section_container "> 
     <div id="content" class="col-md-10 leftone ">Make a complaint</div> 
     <div class="rightone col-md-2"> 
      <img id="arrow" class="arrow-image"> 
      <a href="www.google.com" ></a> 
     </div> 
    </div> 
    <div id="section_container" class="col-md-3 section_container "> 
     <div id="content" class="col-md-10 leftone ">Make a complaint</div> 
     <div class="rightone col-md-2"> 
      <img id="arrow" class="arrow-image"> 
     </div> 
    </div>

在這裏，我是從哪裏來的，我調用javascript函數處理程序，在處理程序三個相同的div我寫的代碼，如果改變的類單擊節容器上

問題：
因爲有三個相同的元素section_container，我無法找到哪個元素應該突出顯示（應該應用css類）。

元素ID：content arrow和section_container獲取新的類。

問題：如何識別只有該div纔會突出顯示哪個點擊已被註冊。

來源

2016-12-22 vaibhav

請添加您的JS代碼。 –

在html中，ID必須是唯一的，所以改變這些。你的代碼也在哪裏？ – Esko

爲更多元素使用相同ID的原因是什麼？ – debute

請注意，您的ID應該是唯一的....您不能擁有多個具有相同ID的項目。但是，你應該能夠添加代碼

onclick="handler(this)"

在所有三個要素。正如@Esko提到，請添加您的JS代碼

來源

2016-12-22 11:54:19 Reflamer

你應該看看jQuery的，這使得這個很簡單的東西，如下列：

$('.section_container').on('click', function() { 
    var $this = $(this); 
    // First remove the new class from all the other sections 
    $('.section_container').removeClass('extra-class'); 
    $('.section_container .content').removeClass('content-extra-class'); 
    // Then add it to just this one 
    $this.addClass('extra-class'); 
    $this.find('.content').addClass('content-extra-class'); 
});

來源

2016-12-22 12:03:03 Robba

假設你有一個在你的JavaScript稱爲handler功能您可以將點擊的元素作爲關鍵字this的參數，就像@Reflamer寫道的那樣。

的，你可以使用classList屬性manipulite元素有哪些類，像這樣：

function handler(element) { 
    element.classList.add("myFancyClass"); 
}

如果你想操縱元素的孩子，你可以使用children attribute：

function handler(element) { 
    let children = element.children; 

    children.forEach(function(child) { 
     if(child.className === "content") { 
      child.classList.toggle("myFancyClass"); 
     } 
    }) 
}

或使用其他classList函數描述在Mozilla Developer Network

來源

2016-12-22 12:05:13 Smedegaard

是的ID必須是唯一的。我已經使用純JavaScript W/O庫

var elements = document.getElementsByClassName("section_container"), 
 
    anIndex = 0; 
 

 
if (elements && elements.length) { 
 
    for (anIndex; anIndex < elements.length; anIndex++) { 
 
    if (elements.hasOwnProperty(anIndex)) 
 
     elements[anIndex].addEventListener("click", cHandler); 
 
    } 
 
} 
 

 
function cHandler(event) { 
 
    for (anIndex = 0; anIndex < elements.length; anIndex++) { 
 
    if (elements.hasOwnProperty(anIndex)) 
 
     elements[anIndex].classList.remove("highLight"); 
 
    } 
 
    this.classList.add("highLight"); 
 
}

.highLight { 
 
    background-color: red; 
 
}

<div class="col-md-3 section_container "> 
 
    <div id="content" class="col-md-10 leftone ">Make a complaint</div> 
 
    <div class="rightone col-md-2"> 
 
    <img id="arrow" class="arrow-image"> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-md-3 section_container"> 
 
    <div id="content" class="col-md-10 leftone ">Make a complaint</div> 
 
    <div class="rightone col-md-2"> 
 
    <img id="arrow" class="arrow-image"> 
 
    </div> 
 
</div>

來源

2016-12-22 12:19:31

function getSpecificChild(parent) { 
    for (var i = 0; i < parent.children.length; i++) { 
     if (parent.children[i].tagName.toLowerCase() === "button") { 
      return el.children[i] 
     } 
    } 
}

在這種情況下，我只是用tagName識別button元素，但你可以使用任何其他的JavaScript標識符讓你的孩子元素

來源

2017-07-21 20:57:12 Jeeva

如何從javascript中的父元素獲取特定的子元素

回答

相關問題