詳しい人求む！

jqueryを使って、focusとclickを使う方法が分からない

解決済

質問者：usui-2015
質問日時：2017/12/02 14:38
回答数：2件

下記のhtmlで、focusとclickを使う方法が分からない
単純に最後の要素を表示するのは下記の
alert($("#target li:last-child").text());

で表示出来ますが。これを
$("#target li:last-child").click();
と書いても、clickは動きません。

また、
$("#target li:last-child").focus();
と書いても、focusは出来ません。

$("#target li:last-child")を使って
focusとclickを動作させる
構文を例示願います。

また、この方法では出来ない場合は、
別の方法で出来る構文を例示願います。

宜しくお願いします。

<HTML>
<HEAD>
<TITLE>clickとfocusの実験</TITLE>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</HEAD>
<BODY>
<DIV id="target">
<OL>
<LI><a href="1.html">180101-0300</a></LI>
<LI><a href="2.html">180101-0400</a></LI>
<LI><a href="3.html">180101-0500</a></LI>
</OL>
</DIV>

<script>
$(function(){
alert($("#target li:last-child").text());
});
</script>
</BODY>
</HTML>

その時のソースは下記です。
<HTML>
<HEAD>
<TITLE>要素の取得</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
<script>
$(function(){
// 何らかの処理
$("#target li:last-child a")[0].click();
});
</script>
</HEAD>
<BODY>
<OL id="ol">
<A HREF="1.html"><LI>長崎</LI></A>
<A HREF="2.html"><LI>福岡</LI></A>
<A HREF="3.html"><LI>熊本</LI></A>
</OL>
</BODY>
</HTML>

No.1の回答に寄せられた補足コメントです。補足日時：2017/12/02 17:21
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： teide
回答日時：2017/12/02 15:01

クリックするのはULタグではなく、その中にあるaタグなので、「li:last-child」ではなく「li:last-child a」とする必要があります。

$(...)で返却される値は配列です（alert($("#target li:last-child").length); を実行すればわかります）。.click()は配列ではなく、aタグに対して呼び出す必要があるので、$(...)[0].click()とする必要があります。

上記2つを組み合わせて、以下のように書くことで画面遷移できました。
$("#target li:last-child a")[0].click();

同じ理由で、以下のように書くとフォーカスできます。
$("#target li:last-child a")[0].focus();

フォーカスについては、[0]がなくても動作しました。

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

focusは上手く動きしましたが、click
はエラーが出て動きませんでした。

下記のエラーと成ります。
firefoxとgoogle chromeの場合を示します。

firefox
TypeError: $(...)[0] is undefined

chrome
Uncaught TypeError:Cannot read property 'click' of undefined

何処が悪いのでしょうか。
宜しくお願いします。

通報する

お礼日時：2017/12/02 17:17

No.2

回答者： aluckyumi
回答日時：2017/12/02 15:02

liじゃなくて、ol でしょう？

- 0
- 件

通報する

この回答へのお礼

済みません。動くみたいです。
先程は大変失礼しました。

なお、これは最初の方への補足コメントですが、
コメントの数が不足して補足が出来ませんので
ここに補足しました。

大変に有難う御座いました。
助かりました。

これで、全面解決です。

<HTML>
<HEAD>
<TITLE>clickとfocusの実験</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
</HEAD>
<BODY>
<DIV id="target">
<OL>
<LI><a href="1.html">180101-0300</a></LI>
<LI><a href="2.html">180101-0400</a></LI>
<LI><a href="3.html">180101-0500</a></LI>
</OL>
</DIV>

<script>
$(function(){
//alert($("#target li:last-child").text());
$("#target li:last-child a")[0].click();

});
</script>
</BODY>
</HTML>