![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
下記の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>
No.1ベストアンサー
- 回答日時:
クリックするのは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]がなくても動作しました。
有難う御座います。
focusは上手く動きしましたが、click
はエラーが出て動きませんでした。
下記のエラーと成ります。
firefoxとgoogle chromeの場合を示します。
firefox
TypeError: $(...)[0] is undefined
chrome
Uncaught TypeError:Cannot read property 'click' of undefined
何処が悪いのでしょうか。
宜しくお願いします。
No.2
- 回答日時:
liじゃなくて、ol でしょう?
済みません。動くみたいです。
先程は大変失礼しました。
なお、これは最初の方への補足コメントですが、
コメントの数が不足して補足が出来ませんので
ここに補足しました。
大変に有難う御座いました。
助かりました。
これで、全面解決です。
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したま...
-
プラグイン無しでContactform7...
-
bxslider、画像が3枚以上になる...
-
複数のjavascriptを使うと動か...
-
jqueryを2つ設置した事で片方...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
getElementsByNameで要素が取得...
-
SQLのWHEREで全てを質問する方法
-
ウインドウを縮小しても文字を...
-
プルダウンメニューを別ファイ...
-
Dreamweaver で 外部JSを読み込...
-
「関数が定義されていない」と...
-
window.openで同画面遷移しない
-
確認ダイアログで「キャンセル...
-
onLoadをbodyタグ以外で使用する
-
Vbscriptで自分自身のウィンド...
-
javascriptのalertで文字化けが...
-
ポップアップウィンドウの位置
-
bodyにidをつける理由は何ですか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
jQueryの基本的なことについて...
-
プラグイン無しでContactform7...
-
ebayの返信で『 Message may no...
-
DreamWeaverでJS
-
document.lastChild.appendChil...
-
パソコンでホームページを作成...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
jQueryのloadメソッドをする際...
-
フォントサイズを変更するボタ...
-
同一HTML内に複数のjQueryを作...
-
マウスオーバー+クリカブルマッ...
おすすめ情報
その時のソースは下記です。
<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>