Найти элементы с одинаковым innerHTML

Question

У меня есть кнопка, которая имеет некоторый текст, и я получаю этот текст по innerHTML

var helpName = helpButton.parentElement.querySelector('span').innerHTML;

Тогда у меня есть несколько других кнопок, которые вызывают аккордеонные коробки

var helpAccordions = modal.getElementsByClassName('accordion');

Я хотел бы выбрать один элемент из helpAccordions, который соответствует helpName и установить его как переменную.

    <div class="modal-content">
        <span class="close">&times;</span>
        <h3 class="modal-title">Help</h3>

        <button class="accordion">Key Partners</button>
    </div>

    <div class="section-header">
        <span>Key Partners</span>
        <div class="help-icon"></div>
    </div>

Answer 1

Если вы не можете использовать jQuery, я сделал скрипку, показывающую, как она работает, ниже приведен соответствующий код.

var helpName = helpButton.parentElement.querySelector('span').innerHTML;
var helpAccordions = modal.getElementsByClassName('accordion');
var length = helpAccordions.length;

var myButton;
for(var i = 0; i < length; i++) {
    var button = helpAccordions[i];
    if(button.innerHTML === helpName) {
        myButton = button;
        break;
    }
}
console.log(myButton) // the button with Key Partners as the text

Answer 2

Просто используйте с JQuery contains()

$(document).ready(function (){
$('button').click(function(){
var a = $('span:Contains('+$(this).text()+')').parent();
//result varible is a
console.log(a.attr('class'))
})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="modal-content">
        <span class="close">&times;</span>
        <h3 class="modal-title">Help</h3>

        <button class="accordion">Key Partners</button>
    </div>

    <div class="section-header">
        <span>Key Partners</span>
        <div class="help-icon"></div>
    </div>