jQueryで指定タグを置換

Question

【補足】お二人からご回答を頂戴しましたが、文末の「環境」において実現可能な方法を探しております。どうぞ宜しくお願い致します。

###実現したいこと

以下の条件に合致したら<p>へ置換したいです。

条件：<a>のみを直下に持つ<dt>

###該当のソースコード
こちらはChromeのブックマークをエクスポートした際のHTMLになります。
このように<dt>が出力されるのですが、このうち条件に合致したら<p>へ置換したいです。

<dt>
  <h3>title</h3>
  <dl>
    <p></p>
    <dt><a>linkA</a></dt><!-- 置換したい -->
    <dt><a>linkB</a></dt><!-- 置換したい -->
  </dl>
  <p></p>
</dt>

###目的の結果
以下が目的の結果です。

<dt>
  <h3>title</h3>
  <dl>
    <p></p>
    <p><a>linkA</a></p><!-- 置換した -->
    <p><a>linkB</a></p><!-- 置換した -->
  </dl>
  <p></p>
</dt>

###試したこと(1)
まずループを用いて全てのdtを確認する必要があると思いました。そのループ内で条件を判定し、trueなら置換という作戦を考えています。
しかし条件の判定として.childrenを使いましたが思うようにできませんでした。

$(function(){

  $('dt').each(function(index, element){

    // 条件に合致したら
    if ( $(this).children('a') ) {
      $(this).replaceWuith('p');
    }
  });
  
});

###試したこと(2)
コンソールで確認したら１回だけundefinedが表示されるだけで、なぜなのか..わかりません。

$(function(){

  $('dt').each(function(index, element){
    // コンソールで確認 
    var hasA = $(this).children('a');
    console.log(hasA); // -> undefined

    // 条件に合致したら
    if ( hasA ) {
      $(this).replaceWuith('p');
    }
  });
  
});

###試したこと(3)
シンプルにdtのループとコンソールだけの処理にしたのですが、同じように１回だけundefinedが表示されるだけでした..

$(function(){
  $('dt').each(function(index, element){
    console.log( $(this) );
    console.log( index );
    console.log( element );
  });
});

###試したこと(4)
普通に取得したら一番外側のdtがコンソールに表示されました。

var dts = $('dt');
console.log(dts);

なのに、.lengthで数えてみたらundefinedでした。

var dtLen = $('dt').length;
console.log(dtLen);

###環境
ChromeでエクスポートしたブックマークのHTMLファイルを、ダブルクリックでChromeで開き、F12のコンソール画面で実行しています。

Chromeバージョンは以下です。
バージョン: 94.0.4606.81（Official Build） （64 ビット）

Comments

[maisumakun]

そもそも、<dl>直下に<p>を書くのは適切ではありません。

[crazyBaseball]

仰る通りかと思いますが、Chromeが出力するHTMLなので、そういった指摘はGoogleにお願いします..

[maisumakun]

> Chromeが出力するHTMLなので、そういった指摘はGoogleにお願いします..

それをあえて行おうとしているのはなぜでしょうか？

[crazyBaseball]

特に気にしないでください。

Answer 1

一般にdlタグの直下にはscriptやtemplateなど特殊なものを除くと
dt,dd,div(特例)しか置くことができません

また仮にpに置換できるとして、aのみを直下に持つという条件は曖昧です

<dl>
<p></p>
<dt><a>linkA</a></dt>
<dt><a>linkB</a></dt>
<dt><a>linkC</a><a>linkD</a></dt>
<dt><a>linkE</a>text</dt>
<dt><a>linkF</a>
</dt>

• C/Dのように複数のaを持つ場合
• Eのようにテキストノードを持つ場合場合
• Fのように改行のような空白文字をテキストノードとして持つ場合

$(function(){
  $('dt').each(function(){
    if($('> :not(a)',this).length>0){
      $(this).contents().unwrap().wrapAll('p');
    }
  });
});

※一部修正

Comments

[crazyBaseball]

ありがとうございます。返答は以下【あ】【い】【う】となります。
特に【う】につきまして、お手すきの折にご確認宜しくお願い致します。

【あ】dlタグの直下の件
→本件において文法は無用です。なぜならEvernoteにコピペする際に<dl>があると自動で削除不可能なインデントが挿入され邪魔なので<p>にしたいだけだからです。

【い】3つのご懸念の件
→いずれもございません。Chromeのエクスポートの書式に従います。

【う】コードの件
→質問の環境下（ChromeでエクスポートしたHTMLファイルを、ダブルクリックでChromeで開き、F12のコンソール画面で実行）では、実現できませんでした。

[yambejp]

一応サンプル付けてありますので適当なdlのサンプルで動作確認していただき
想定する結果と違う場合はご指摘ください

[crazyBaseball]

サンプルありがとうございます。先のコメントの【う】の通りです。思いつく点ございましたらまた宜しくお願い致します。

Answer 2

Comments

[crazyBaseball]

ありがとうございます。.lengthはtrueじゃなく1など、細かい使い方がわかっていなかったので助かりました。

さて確かにcodepenできていますが、質問に記載した環境（ChromeでエクスポートしたHTMLファイルを、ダブルクリックでChromeで開き、F12のコンソール画面で実行）ではできませんでした。もちろんご提示のコードは $(function(){}); で囲んでいます。

[退会済みユーザー]

.

[crazyBaseball]

すごい！できました。本当にありがとうございました。
参考のstackoverflowによればできなかった理由はつまり、「開発ツールのコンソール画面においてはjQueryが使えないから」という原因になるのでしょうか？

[crazyBaseball]

いやしかしjQueryが使えないのならば

$(function(){
console.log('jQueryが使えています');
});

で「$がない」というエラーとなるはずですよね。

[退会済みユーザー]

.

[crazyBaseball]

なるほど！仰る通りでした。いつも開発ツールでjQuery使えるのにおかしいな？と首をかしげていたので、スッキリできました。最後までご返答誠にありがとうございます。

Answer 3

直接的な回答ではありませんが、WebページにjQueryは入っていますでしょうか？

jQueryがない場合、コンソール専用の特殊な$が出現します（jQueryの$とは異なる動作をします）。

Comments

[crazyBaseball]

ご指摘の通りでした。普段開発ツールでもjQueryが使えるというだけで、jQueryは入っているはずだと勘違いしておりました。尚その点は letsirK.aivlyS 様が解決して下さいました。