2016-11-07 7 views
-3

を取る方法:jqueryの - 我々は、このhtmlコードを持っているとしましょう値

<tr> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test1</i></a></td> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test2</i></a></td> 
 

 
</tr> 
 
<tr> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test3</i></a></td> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test4</i></a></td> 
 

 
</tr>

私はこれらのリンクの1 jqueryのコードをクリックするたびに実行するために取得するには、ここでは、 jqueryの:

$(document).ready(function(){ 
 
\t //References 
 
\t var sections = $("i"); 
 
\t var loading = $("#loading"); 
 
\t var content = $("#ajax-box"); 
 
\t var id = 2 // <= this should be the value of tr 
 
\t 
 
\t sections.click(function(){ 
 
\t \t 
 
\t \t showLoading(); 
 
\t \t 
 
\t \t switch(this.id){ 
 
\t \t \t case "damage-file": 
 
\t \t \t \t content.slideToggle(); 
 
\t \t \t \t content.load("./sections.php #section_home",{'userdata':id}, hideLoading); 
 

 
\t \t \t \t break; 
 
\t \t \t case "depend-people": 
 
\t \t \t \t content.slideToggle(); 
 
\t \t \t \t content.load("./sections.php #section_people", hideLoading); 
 
\t \t \t \t break; \t 
 
\t \t \t default: 
 
\t \t \t \t //hide loading bar if there is no selected section 
 
\t \t \t \t hideLoading(); 
 
\t \t \t \t break; 
 
\t \t } 
 
\t }); 
 

 
\t //show loading bar 
 
\t function showLoading(){ 
 
\t \t loading 
 
\t \t \t .css({visibility:"visible"}) 
 
\t \t \t .css({opacity:"1"}) 
 
\t \t \t .css({display:"block"}) 
 
\t \t ; 
 
\t } 
 

 
\t function hideLoading(){ 
 
\t \t loading.fadeTo(1000, 0); 
 
\t }; 
 
});

(私は別のページをロードするためにjqueryを使用することがわかります)

すべての "tr"タグは数字を持っていて、私は "tr"の任意のリンクをクリックするとjqueryに行きます

<tr id="123"> 
 
    <td><a href="#depend"><i id="damage-file" class="fa fa-group">test1</i></a></td> 
 
    </tr> 
 
<tr id="456"> 
 
    <td><a href="#depend"><i id="damage-file" class="fa fa-group">test2</i></a></td> 
 
</tr>

私は "TEST1" をクリックしたときに私は上をクリックした場合、その後= 123 idは値としてjqueryのに行くとすべきである:>> exmaple .FOR "VAR IDが" これはコードです"test2" then id = 456は値としてjqueryに行きます。誰かがこの問題を助けてくれますか?

+0

次のようになります。与えられたIDは一度しか使用できないので、複数の 'id =" damage-file "'を持つことはできません。データ属性やクラスに変更する必要があります。次は、TRの数値IDをHTMLで使用しています.IDは数字で始めることはできません。そのため、データ属性を使用してそのデータを格納したり、接頭辞として文字列を付けるようにIDを変更することもできます。 – Dymos

+1

@Dymos、[HTML5仕様では、スペースを含まない限り、IDは何でも構いません](https://www.w3.org/TR/html5/dom.html#the-id-attribute) 。 OPが単にそのデータを格納する方法として 'id'属性を使用しているのであれば、データ属性の提案で正しいと思います。 –

+0

@PatrickEvansああ、それを指摘してくれてありがとう、私は彼らがそれを変更したことを認識していない! – Dymos

答えて

2

クリックした要素<i>のDOMツリーを、<tr>に到達するまでトラバースする必要があります。幸いにもjQueryには.closest()というメソッドがあります。一致させるセレクタに渡すだけで、最も近い親要素が取得されます。あなたのケースでは

あなたが親<tr>を取得したいので、それは私があなたのHTMLは、いくつかの問題を持っているので、あなたが最初にここにいくつかの問題に実行しているかもしれないと思う

sections.click(function(){ 
    var id = jQuery(this).closest("tr").attr("id"); 
関連する問題