finding a span element by its content and setting enclosing div property

Question

I have a list of dynamically generated links using dynacloud.js in this form:

<a href="#description1"><span>description 1</span></a>
<a href="#description2"><span>description 2</span></a>
<a href="#description3"><span>description 3</span></a>

Which are generated from a list of bootstrap type spans in this form:

<span class="label label-default">description 1</span>
<span class="label label-default">description 2</span>
<span class="label label-default">description 3</span>

The spans are contained within a div that is hidden.

<div class="body_accordion" style="display: none;"> ..content.. </div>

What would be a javascript or jQuery method that would allow me to click on a link and have all corresponding hidden divs where link description = span description toggled to visible?

why is this question so offensive? :)

Let me reiterate: I wish to locate a span based on its content. Not ID or class The other functionality requested is not so important. Thanks.

you'd want the elements `.textContent` or the jQiery `.text()` — Jaromanda X, Mar 04 '17 at 10:57
I'm unclear how text() can find the content within a span. From what I understand it matches elements not the content within elements. Plus my aim is not to change the found element — haz, Mar 04 '17 at 11:06
[jQuery .text() documentation](http://api.jquery.com/text/) - the documentation is your friend — Jaromanda X, Mar 04 '17 at 11:07
Maybe what you want is `innerHTML`. Also you can change the div's style like this: `document.getElementsByClassName('body_accordion')[0].style.display="";` Anyway I really don't know what you really want, plus you didn't provide any attempt you tried. — Sangbok Lee, Mar 04 '17 at 11:09
i want to find a span based on its content not its ID or class — haz, Mar 04 '17 at 11:11
@Sangbok Lee - thank you, I know how to change the visibility of the div - what I don't know is how to search for a span (its location within the dom) based on its content — haz, Mar 04 '17 at 11:13
Search and search... Have you checked [this](http://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext) or [this](http://stackoverflow.com/questions/7321896/jquery-find-element-by-text)? — Sangbok Lee, Mar 04 '17 at 11:18
@Sangbok Lee - often, the highest likelihood of conducting a successful search for a solution lies in being able to articulate the question in a way which optimises a search. This exercise helped but none of you offered the appropriate solution. :) — haz, Mar 04 '17 at 11:31

haz · Accepted Answer · 2017-03-05T07:53:59.863

a jQuery solution to the question:

find every instance of a span element with content "description 1" using contains() selector

$("span:contains('description 1')");

then pipe to filter() selector to select only the spans with the 'label' class

$("span:contains('description 1')").filter($(".label"));

then climb up (two in this case) parent nodes to get to required div using parent()

$("span:contains('description 1')").filter($(".label")).parent().parent();

set div to visible using show():

$("span:contains('description 1')").filter($(".label")).parent().parent().show();

if the name is a variable called 'text' (i.e. var text; ):

$('span:contains('+text+')').filter($('.label')).parent().parent().show();

finding a span element by its content and setting enclosing div property

1 Answers1