I need to change the class of each href item depending on its value. I have this code.   &lt;body onload="myFunction()"&gt;      &lt;div class="indi-download"&gt;       &lt;div class="pull-left"&gt;     &lt;h6 class="file" id="file-display-id"&gt;%file_display_name%&lt;/h6&gt;     &lt;/div&gt;      &lt;div class="pull-right"&gt;       &lt;a class="download-link" id="download_link" href="%file_url%"&gt;Download&lt;/a&gt;     &lt;/div&gt;      &lt;/div&gt; &lt;/body&gt;   In getting the href item on class download-link, I used this javascript code.  function myFunction() {   var anchors = document.querySelectorAll('a.download-link');   for (var i = 0; i &lt; anchors.length; i++) {     var url = anchors[i].href;     var splitfile = url.split('.').pop();     if(splitfile=='pdf'){        //class="file" would be class="pdf-file"    }else if(splitfile=="docx"){        //class="file" would be class="docx-file"    }else{       //other file format...    }  } }   on Inspect Element, Something this kind of output.  Element 1 ---  &lt;div class="indi-download"&gt; &lt;div class="pull-left"&gt;             //Changed into pdf-file     &lt;h6 class="pdf-file" id="file-display-id"&gt;Sample PDF 1&lt;/h6&gt; &lt;/div&gt; &lt;div class="pull-right"&gt;     &lt;a class="download-link" id="download_link" href="http://mysite-               info/download/files/file1.pdf"&gt;Download&lt;/a&gt; &lt;/div&gt; &lt;/div&gt;   Element 2 ---  &lt;div class="indi-download"&gt; &lt;div class="pull-left"&gt;             //Changed into docx-file     &lt;h6 class="docx-file" id="file-display-id"&gt;Sample docx 1&lt;/h6&gt; &lt;/div&gt; &lt;div class="pull-right"&gt;     &lt;a class="download-link" id="download_link" href="http://mysite-      info/download/files/file2.docx"&gt;Download&lt;/a&gt; &lt;/div&gt; &lt;/div&gt;   How to achieve this kind of output? Changing the classes that depends on the values on href. Any Idea?
4670
I have an element that already has a class: &lt;div class=&quot;someclass&quot;&gt;     &lt;img ... id=&quot;image1&quot; name=&quot;image1&quot; /&gt; &lt;/div&gt;  Now, I want to create a JavaScript function that will add a class to the div (not replace, but add). How can I do that?
9012
I'd like to make a click event fire on an &lt;input type="file"&gt; tag programmatically.  Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.  I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.
120657
Suppose, I have the following code:  \documentclass{article} \begin{document} We have totally 7 columns, describing the user: \begin{enumerate} \item ID --- users.name \item Forename --- users\_profiles.first\_name \item Surname --- users\_profiles.last\_name \item Email --- users.mail \item Primary Service --- services.name \item Start date --- FROM\_UNIXTIME(users.created) \item Employment Status --- users\_profiles.employment\_status \end{enumerate} \end{document}   Producing this document:    Is it possible to set the value 7 automatically, depending upon number of elements in the list? The problem is, that it resides before the list.
26657
Below is my code to read items from a document library.  var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('DocumentList')/items?$select=customerID"; $.ajax({       url: url,       method: "GET",       headers: {           "Accept": "application/json; odata=verbose"       },       success: function(data) {           $.each(data.d.results, function(index, item) {             arrayCustomerID[index] = item.customerID;         });       },       error: function(data) {           console.log("error");       }   });     This work for the normal case but what should I do so that it works if I have more than 5000 items in the document library.
33995
I am confused about hreflang="x-default".  I have a site in 2 languages. In each page I have a link to the page itself and a link to the same page in the other language. If I understand correctly, I have to put an x-default also. In my case it goes to the page "language". There the user can see two buttons to choose the language of the site.  The x-default link is the same on all pages and it is present in all of them.   &lt;link rel="alternate" hreflang="en" href="http://example.com/about" /&gt;  &lt;link rel="alternate" hreflang="fr" href="http://example.com/fr/about" /&gt; &lt;link rel="alternate" hreflang="x-default" href="http://example.com/language" /&gt;   I use Screaming Frog to detect possible errors. It says "Missing confirmation links in all the pages" when I see the details of the error. It makes reference only to the x-default link. I do not understand.  How to use the hreflang="x-default"?
22893
I would like to reload an &lt;iframe&gt; using JavaScript. The best way I found until now was set the iframe’s src attribute to itself, but this isn’t very clean. Any ideas?
10956
I am looking to modify the default output of Drupal 8 of links in a certain situation, the language switcher. Ideally I want to be able to do that in a twig template and not have to produce a  that overwwrites that whole link generation system and add a BIG if for the cases I need to overwrite.  I think the output layout should be controllable in the twig template similar to  (this answer outputs the same url for every languages)  I am using bootstrap as a base theme so i'd like to use the bootstrap markup for my links (btn btn-primary, dropdown)  Here is my code I am trying to make links--language-block.html.twig  {%- if links|length == 2 -%}     {# show only alternate language button #}     {%- for key, item in links -%}         {%- if not item.attributes['#options']['set_active_class'] -%} {# &lt;--- this is always true!? #}             &lt;a href="{{ item.link['#url'] }}" class="btn btn-primary"&gt;{{ item.link['#title'] }}&lt;/a&gt; {# #url is always the same what ever the language it is pointing to! #}         {%- endif -%}     {%- endfor -%} {%- elseif links|length &gt; 2  -%}     {# show selected language in button and other languages in drop down #}     &lt;button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"&gt;{{ selectedLanguage }}&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;     &lt;ul class="dropdown-menu"&gt;         {% for key, item in links %}             {%- if not item.attributes['#options']['set_active_class'] -%} {# &lt;--- this is always true!? #}             &lt;li&gt;&lt;a href="{{ item.link['#url'] }}"&gt;{{ item.link['#title'] }}&lt;/a&gt;&lt;/li&gt;             {% endif %}         {% endfor %}     &lt;/ul&gt; {%- endif -%}   Anyone has an idea on how to do this?
82828
I've searched and found variations of this question but I've never found an answer that seemed to work. I need to add a class to the &lt;li&gt; elements, currently the main menu is rendered like this:  print theme('links__system_main_menu', array(     'links' =&gt; $main_menu,     'attributes' =&gt; array(         'id' =&gt; 'slidemenu',         'class' =&gt; array(             'links',             'inline',             'clearfix'         )     ),     'heading' =&gt; t('') ));   As far as I can tell, this only sets up the &lt;ul&gt; element of the main menu, so I was wondering if there's a way to edit the attributes of the 'links' part.  ---EDIT---  Alright, I think I solved it. Apparently you can use theme_links__system_main_menu in templates to override the whole thing. I ended up doing this:  function mytheme_links__system_main_menu($variables) {     $html = '&lt;div id="mainmenu"&gt;';     $html .= '  &lt;ul id="slidemenu" class="clearfix"&gt;';      static $linkClass = 1;      foreach ($variables['links'] as $link) {                         $html .= '&lt;li class="themastyle' . $linkClass . '"&gt;' . l($link['title'], $link['href'], $link) . '&lt;/li&gt;';         ++$linkClass;     }      $html .= '  &lt;/ul&gt;';     $html .= '&lt;/div&gt;';      return $html; }   Not entirely sure if this is correct Drupal, though it did solve my issue!
17553
I'm working with jQuery and looking to see if there is an easy way to determine if the element has a specific CSS class associated with it.  I have the id of the element, and the CSS class that I'm looking for.  I just need to be able to, in an if statement, do a comparison based on the existence of that class on the element.
12792
My DOM looks like this:  &lt;div id="d1"&gt;    &lt;div class="c1"&gt;             &lt;a href="#"&gt;&lt;img src="img1_on.gif"&gt;&lt;/a&gt;             &lt;a href="#"&gt;&lt;img src="img2_on.gif"&gt;&lt;/a&gt;    &lt;/div&gt; &lt;/div&gt;   When someone clicks on an image, I want the image src to change to &lt;img src="imgx_off.gif"&gt; where x represents the image number 1 or 2.  Is this possible or do I have to use CSS to change the images?
6562
Consider the following HTML:  &lt;div class="foo" id="obj"&gt;    I should be changed red    &lt;div class="bar" style="color:black;"&gt;       I should not be changed red.       &lt;div class="foo"&gt;I should be changed red.&lt;/div&gt;    &lt;/div&gt; &lt;/div&gt;   Given a DOM element obj and an expression, how do I go about selecting any children and possibly obj?  I'm looking for something similar to "select descendants" but also including the parent, if it matches the expression.  var obj = $("#obj")[0];  //wrong, may include siblings of 'obj' $(".foo", $(obj).parent()).css("color", "red");  //wrong -- excludes 'obj' $(".foo", obj).css("color", "red");  //correct way, but it's annoying var matches = $(".foo", obj); if ($(obj).is(".foo")) matches = matches.add(obj); matches.css("color", "red");   Is there a more elegant solution to this?
84374
I’ve had a good look and can’t seem to find out how to select all elements matching certain classes in one jQuery selector statement such as this:  $('.myClass', '.myOtherClass').removeClass('theclass');   Any ideas on how to achieve this? The only other option is to do  $('.myClass').removeClass('theclass'); $('.myOtherClass').removeClass('theclass');   But I’m doing this with quite a few classes, so it requires much code.
16404
I have the following HTML &lt;select&gt; element:  &lt;select id="leaveCode" name="leaveCode"&gt;   &lt;option value="10"&gt;Annual Leave&lt;/option&gt;   &lt;option value="11"&gt;Medical Leave&lt;/option&gt;   &lt;option value="14"&gt;Long Service&lt;/option&gt;   &lt;option value="17"&gt;Leave Without Pay&lt;/option&gt; &lt;/select&gt;   Using a JavaScript function with the leaveCode number as a parameter, how do I select the appropriate option in the list?
10610
I have a url like   I need a javascript function to give me the 'th' value from that.  All my urls have the same format (2 letter filenames, with .html extension).  I want it to be a safe function, so if someone passes in an empty url it doesn't break.  I know how to check for length, but I should be checking for null to right?
32885
I have some html like this:  &lt;div id="1"&gt;     &lt;p&gt;         Volume = &lt;input type="text" /&gt;         &lt;button rel="3.93e-6" class="1" type="button"&gt;Check answer&lt;/button&gt;     &lt;/p&gt;     &lt;div&gt;&lt;/div&gt; &lt;/div&gt;   and some JS like this:  $("button").click(function () {     var buttonNo = $(this).attr('class');     var correct = Number($(this).attr('rel'));      validate (Number($("#"+buttonNo+" input").val()),correct);     $("#"+buttonNo+" div").html(feedback); });   What I'd really like is if I didn't have to have the class="1" on the button (I know numeric classes aren't valid, but this is a WIP!), so I could determine buttonNo based on the id of the parent div. In real life there are multiple sections looking like this.   How do I find the id of the div parenting the button. What would be a more semantic way to store the answer in the button code. I want to make this as foolproof as possible for a non programmer to copy and paste without breaking things!
60845
I have used this jquery script on many of my sites with the same theme, settings, etc.  It's in a wordpress Genesis Child theme.  On my current local build, however, when I click on an a href that has the class "scroll", I am getting a console error that reads:    Line 19 of my app.js is this code that I have never had an issue with before:  $(".scroll").click(function () {         if (location.pathname.replace(/^\//, "") === this.pathname             .replace(/^\//, '') &amp;&amp; location.hostname === this.hostname         ) {             var target = $(this.hash);             target = target.length ? target : $("[name=" + this                 .hash.slice(1) + "]");             if (target.length) {                 $("html, body").animate({                     scrollTop: target.offset().top                 }, 1000);                 return false;             }         }     });   I am running jQuery 3.3.1. I have commented out all code in the app.js to identify where the issue may be coming from. This code is right at the top and I have added console.logs all over the document, which show in Console.  What am I doing wrong here?  Thank you!
12301
How can you change the href for a hyperlink using jQuery?