Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery can't change class of all spans inside a div
    primarykey
    data
    text
    <p>In the following example, how can I change the class of all the <code>&lt;span&gt;</code> that are inside a particular <code>h2</code> <code>&lt;div&gt;</code>, while leaving the one that was clicked unchanged?</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;Side bar voting thingy&lt;/title&gt; &lt;style type="text/css"&gt; .hide { display: none; } .no-like { color: blue; } &lt;/style&gt; &lt;script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $(".like").click(function() { var hasLike = $(this).data("id"); var data = 'id='+hasLike; console.log($(this).data('id')); if(hasLike) { // ajax call $.ajax({ type:"GET", url:"demo.php", data:data, beforeSend:function(html){ // We'll think of something to do here }, success: function(page_data){ // Remove class like, add class no-like $('.like[data-id="'+page_data+'"]').removeClass('like').addClass('no-like'); //Change the class for all other like links other than the one the user clicked //Hard coded for this example $('.h2[data-id="9"]').siblings('.like').removeClass('like').addClass('hide'); }, error: function(yikes){ //To do later }, }); } return false; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div class="h1" data-id="1"&gt;Teachers&lt;/div&gt; &lt;div class="h2" data-id="2"&gt;Who is your favorite Math teacher? &lt;div&gt;* Homer Simpson &amp;nbsp &lt;span class="like" data-id="3" data-sec="2"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* Elmer Fudd &amp;nbsp &lt;span class="like" data-id="4" data-sec="2"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* Bugs Bunny &amp;nbsp &lt;span class="like" data-id="5" data-sec="2"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* Obelix &amp;nbsp &lt;span class="like" data-id="6" data-sec="2"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* Mojo Jojo &amp;nbsp &lt;span class="like" data-id="7" data-sec="2"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;br&gt; &lt;div class="h1" data-id="8"&gt;Restaurants&lt;/div&gt; &lt;div class="h2" data-id="9"&gt;Which is your favourtie restaurant in town? &lt;div&gt;* McDonalds &amp;nbsp &lt;span class="like" data-id="10" data-sec="9"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* KFC &amp;nbsp &lt;span class="like" data-id="11" data-sec="9"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* The Heart Attack Grill &amp;nbsp &lt;span class="like" data-id="12" data-sec="9"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* In-n-Out &amp;nbsp &lt;span class="like" data-id="13" data-sec="9"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;div&gt;* Popeye's &amp;nbsp &lt;span class="like" data-id="14" data-sec="9"&gt;Like&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>I need to select a particular <code>h2</code> <code>&lt;div&gt;</code> in a page. There may be many more.</strong></p> <pre><code>success: function(page_data){ // Remove class like, add class no-link $('.like[data-id="'+page_data+'"]').removeClass('like').addClass('no-like'); //Change the class for all other like links other than the one the user clicked //Hard coded for this example $('.h2[data-id="9"]').siblings('.like').removeClass('like').addClass('hide'); }, </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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