JQueryの記法について、お教えください。

Question

下記のhtmlの、<li><p><a></a></p></li>をJQueryで取得したい場合、
どのように記述すれば良いでしょうか？

<ul class="targetArea">
  <li>
    <p>
      <a href="#test1">リンクテキスト</a>
    </p>
  </li>
</ul>

----現状の記述----

    if (searchText != '') {
      $('.targetArea p').each(function() {
        targetText = $(this).next().text();
        targetText2 = $(this).html();
        if (targetText.indexOf(searchText) != -1) {
          searchResult.push(targetText2);
        }
      });

現状だと、htmlテキストが取得されてしまいます。　aタグなどは属性のまま取得したいです。
4行目の html　の部分を変える必要があると思うのですが正しい記述がわからず。。

お知恵をお貸しいただけないでしょうか。

Comments

[m.ts10806]

取得するのは良いのですが、どのような情報をどのように扱いたいのでしょうか。
「<li><p><a></a></p></li>をJQueryで取得したい」だとHTMLを取得したいことになるので
$(this).html()だけで良いのですけど。

[x_x]

$('.targetArea p') の時点で p になっているのですが li から取りたいのですか？

[yugoroy]

ご回答ありがとうございます。　説明不足で申し訳ありません。
取得したいのは、<li><p><a></a></p></li>ではなく、
<p><a></a></p>でした。

<p><a href="#test1">リンクテキスト</a></p>　のような形で取得したいです。
htmlを取得、ではなく、属性やタグ情報の伴ったテキストデータとして取得したい、という内容です。

[m.ts10806]

><p><a href="#test1">リンクテキスト</a></p>
HTML＝テキストデータになると思いますけど・・
html()は指定した要素の内部の情報をテキストデータとして取得するもので、
<p><a href="#test1">リンクテキスト</a></p>となっていればそれはそれで正しいHTMLのテキストデータ　ですよ。

[yugoroy]

mts10806　様
ありがとうございます。
確かにテキストデータの取得は出来ているのですが、、
&lt;a href="#optimStore"&gt;&lt;span
のような文字データでして、タグやclassが適用されない文字として出力されており、
そうではなく、cssやタグが適用化された状態で出力したい、と考えております。
説明下手で申し訳ありません。。

[m.ts10806]

text()だとそうなります。（HTMLエスケープが入ります）
html()だとそのまま取得するのでそうなりません。

[yugoroy]

mts10806　様
正規表現で出力されてしまっているようです。
&lt;a href="#test"&gt;&lt;span class="leftArrow"

クロームのツールで上の箇所を
<a href="#test><span class="leftArrow"

と書き直すと、一時的に直りました。
searchResult.push(targetText2);
と、.pushで出力しているのがまずいのでしょうか？

[m.ts10806]

いえ正規表現ではなく「htmlエスケープ」です。

[yugoroy]

mts10806様
ありがとうございます。　ご助言がヒントとなりました。
出力の記述の方に問題がありました。

// 検索結果をページに出力
for (var i = 0; i < searchResult.length; i ++) {
$('<p>').text(searchResult[i]).appendTo('#searchResult_list');
}

↓

// 検索結果をページに出力
for (var i = 0; i < searchResult.length; i ++) {
$('<p>')html(searchResult[i]).appendTo('#searchResult_list');
}

と、こちらをtextからhtmlにすることで解決いたしました！

[m.ts10806]

もし既についた回答以外の手法なのであればご自身で回答書かれて自己解決とされると良いです。
※ただ既についた回答も大事なことが書かれているので理解した上で解決済みとしてください

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

[yugoroy]

kei344　様
解決済みとさせていただきました。

Answer 1

$('ul.targetArea li')で取得はできます。

…そのあと何をしたいかのほうが重要ではありませんか？

Answer 2

解決いたしました。
原因としては、データの取得は"html"で取得していましたが、
それを出力している箇所の記述が、"html"ではなく"text"だったため、
読み込んだものをhtmlエスケープで出力していたためでした。

// 検索結果をページに出力
for (var i = 0; i < searchResult.length; i ++) {
$('<p>').text(searchResult[i]).appendTo('#searchResult_list');
}

↓

// 検索結果をページに出力
for (var i = 0; i < searchResult.length; i ++) {
$('<p>')html(searchResult[i]).appendTo('#searchResult_list');
}

とすることで解決いたしました。
皆様ありがとうございました。

Comments

[m.ts10806]

回答でもマークダウン使えますよ

Answer 3

どの状態で取得したいのでしょうか？

<script>
$(function(){
  console.log($('.targetArea>li>p>*').get())
});
</script>
<ul class="targetArea">
  <li>
    <p>
      <a href="#test1">リンクテキスト</a>
    </p>
  </li>
</ul>