Databases
StackOverflow2013
Postsdbo
POusing the contents of <a> tag to set the li class with jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POusing the contents of <a> tag to set the li class with jquery
    text
    copied!<p>I have a simple drop-down menu:</p> <pre><code>&lt;ul id="nav" &gt; &lt;li&gt;&lt;a href='/'&gt;Parent One&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;Parent Two&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre> <p>I need to assign a class to the &lt; li > tag of the parent that is equal to the name of the parent in the &lt; a > tag.</p> <pre><code>&lt;ul id="nav" &gt; &lt;li class="ParentOne"&gt;&lt;a href='/'&gt;ParentOne&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="ParentTwo"&gt;&lt;a href='/'&gt;ParentTwo&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='/'&gt;child&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre> <p>I tried this bit of code:</p> <pre><code> &lt;script language="javascript" type="text/javascript"&gt; $('#navigation ul li a').each(function(index) { var link = $(this); $('li', link.parent()).addClass(link.text()); }); &lt;/script&gt; </code></pre> <p>But that applies the class to the children's &lt; li > tag and not the parent &lt; li > - any help would be appreciated. Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload