Contact Info

  • aniuma OÜ Harju maakond, Tallinn, Lasnamäe linnaosa, Sepapaja tn 6, 15551

JavaScript (jQuery) で特定のドメインのURLにパラメーターを付与する

JavaScript を使って自サイトのドメインや「/ (スラッシュ)」から始まる相対パスの最後にパラメーターを付与する方法について、実装時に調べたことや方法などをまとめます。 今回は WordPress のテーマに実装し jQuery が組み込まれているので、jQuery を利用している前提で進めています。そのため jQuery(function ($) { 処理 } といった書き方をしています。
jQuery(function ($) {
  $(function () {
    // anchorsにaタグを配列ですべて格納
    const anchors = document.getElementsByTagName("a");
    // 条件判定用のURLを取得
    const matchStr = document.domain;

    for (let i = 0; i < anchors.length; i++) {
      // アンカータグを変数に格納
      const linkElement = anchors[i];
      // hrefの中身を変数にとりだす
      let linkUri = linkElement.getAttribute('href');
      // 空じゃなければ次へ
      if (linkUri) {
        // 条件判定用のURLを含んでる、もしくはスラッシュで始まっていれば
        if (linkUri.match(matchStr) || linkUri.startsWith('/')) {
          // 末尾にスラッシュがあれば削除
          linkUri = linkUri.replace(/\/$/, '');
          // パラメータを付与して配列に戻す
          anchors[i].href = linkUri + "?from_app=true";
        }
      }
    }
  });
});
WordPress のテーマに実装する場合はこのままペタッとはればok。

参考記事

http://cly7796.net/wp/javascript/location-url/
URLを変えたりパラメータ・ハッシュを追加する方法
https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter
JavaScriptを使ってパラメーターを付与について
https://stackoverflow.com/questions/9075540/how-to-create-conditional-hyperlink-in-html
条件付きでリンクの作り方について
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html
JSのパラメーターやハッシュの取り回しについて詳しく書いてある

特定のクラスをもつ要素でnth-child,nth-of-typeは使えない

nth系の擬似クラスを利用して「○○個目の要素にはスタイルを付与」なんてことをよくやりますが、クラス名を付与した要素をnthを使って数えてCSSでスタイルを付与することは現段階ではCSSのみで実装できないようです。
nth-childtnth-of-typeについてはこちら

特定のクラスを付与した要素はnthで利用できない

   <div class="sample">
        <p>1</p>
        <p class="acitve">
            2
        </p>
        <p>3</p>
        <p class="acitve">
            3
        </p>
        <p>5</p>
    </div>
このようなマークアップの場合は後述のとおり、セレクターのみでは数えることができますが「○○個目の.active」は選択できません。

有効なnthの指定

.sample p:nth-of-type {
   color:red;
}

無効なnthの指定

.sample p.active:nth-of-type {
   color:red;
}

問題の解決方法

:has擬似クラスについての記載がある記事
:has擬似クラスがCSS4の時に使えるようになる予定ですが、同様にCSS4では:nth-​​matchが利用可能となるためそれまでCSSのみでの実装は難しそうです。
li:nth-​​match(2 of .active){ 
color:red;
}

JavaScriptを利用した解決方法

CSSだけでは難しいのでJavaScriptを利用して実装する場合は後述のコードで実装可能です。JSのみとjQueryを使った短縮版も記載してあります。
// JavaScriptのみ
document.getElementsByClassName( 'active')[1] .style.color = 'red';

// jQueryを利用
$( '。active:eq(1)')。css( 'color'、 'red');
前述のコードでは2番目の.activeの要素がにスタイルを個別で付与してあります。0から数字を数えているので3番目の要素を指定したい場合は2、6番目の場合は5とそれぞれ数字を変えると指定することができます。

参考URL

CSS Select nth element with class

CSS3の擬似クラス [ :nth-child ] と [ :nth-of-type ] の違いと参考の記事まとめ

「○○個めのliには別のスタイルをあてたい」や「奇数の要素の背景色を変えたい」といった時は擬似クラスの:nth-child や :nth-of-type を使って解決します。

:nth-child と :nth-of-type の違い

:nth-child と :nth-of-type の違いは要素 (セレクター) が同じかどうかです。:nth-child の場合はdivやpのように違う要素でも数に数えますが、 :nth-of-type の場合は div や p などの要素と一緒にし異なった要素は数えません。 後述のようなHTMLがあった場合、 .p-01 にスタイルを指定したい時の記述の違いをみていきましょう。
<div class="sample">
    <div>
        div-01
    </div>
    <div>
        div-02
    </div>
    <p>
        p-01
    </p>
    <p>
        p-02
    </p>
    <div>
        div-03
    </div>
    <p>
        p-03
    </p>
    <div>
        div-04
    </div>
</div>
.sample :nth-child(3) {
    background-color: red;
}
.sample p:nth-of-type(1) {
    background-color: red;
}
このように:nth-child , :nth-of-child ではそれぞれの記述のルールがあり、同じ要素にスタイルをあてたくても違った書き方となります。 また.sampleの中の1つ目のp要素にスタイルをあてるために p:first-childと指定しても、.sampleの中にある1つ目の小要素はpではなくdivなためこの記述も無視されます。

参考の記事

oddやevenを利用して奇数偶数の指定や、3n(3の倍数)、-n+5(最初から五番目まで)、n+6 (六番目以降)などといった指定も可能です。 詳しくは疑似クラス :nth-child t :nth-of-child が詳しく書いてある記事を見てみましょう。
https://coliss.com/articles/build-websites/operation/css/nth-child-vs-nth-of-type.html
https://tech.qookie.jp/posts/css-nth-child-style/
https://wp-p.info/tpl_rep.php?cat=css-intermediate&fl=r3
https://wp-e.org/2014/05/20/2420/
https://qiita.com/nabe_kurage/items/c0ec708f4ad15fac62ae

特定の小要素がある親要素にCSSをあてる方法

WordPressなどのCMSを利用したウェブサイトを運用していると「この要素を持った親要素のマージンをなくしたい」などの状況にでくわすことが多々あります。対応策をいくつか紹介します。
<p>
    <span>a</span>
</p>
<p>
    <span>o</span>
</p>
<p>
    <span>e</span>
</p>
<p>
    <span>u</span>
</p>
<p>
    aoeui
</p>
<p>
    <span>i</span>
</p>
<p>
    aoeui
</p>
このようにp要素が続く場合と単体の場合でマージンを変えたい場合、なおかつCMSの仕様に依存するため特定の小要素を持つ親要素にクラスを指定できない時の対処方法です。

対応方法

CSS4で:has (擬似クラス)を使う

CSS3では特定の小要素がある親要素にCSSをあてる方法がないらしく、CSS3の次にくるであろうCSS4で実装予定の機能 :has (擬似クラス) を利用することで実装が可能となります。
https://developer.mozilla.org/ja/docs/Web/CSS/:has
:has()の説明や各ブラウザの対応状況
しかし前述の記事でも確認できるとおり、現状ではどのブラウザでも対応できないためしばらくは別の方法を模索するしかありません。

JavaScriptで:has(メソッド) を使う

CSSでは対応できませんがjQueryの:hasメソッドを活用することで、特定のクラスを付与し上書きすることは可能です。
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
    $("p:has(span)").addClass("parent");
});
</script>

まとめ

CSS4がやってきて:has (擬似クラス) が利用できるまではjQueryの:hasメソッドを利用して特定の要素にクラスを付与するとよいでしょう。 他に良い方法があればコメントなどで教えていただけると嬉しいです!

参考URL

https://web-diy.jp/2017/03/170327_01/
https://www.webdlab.com/labs/jquery-css/