jQueryの前の（）の最後の3タグ名は、データ属性を取得する

Question

ねえ、私は私がADDtab_138269500上のボタンをクリックしてから行くとバック（前を行くすることがとるのパスを把握しようとしていますすべて）スパンタグまで、最初にバックワードになります。

$(document).ready(function() {  
    $('[data-item-id="ADDtab_138269500"]').click(function() { 
    var blah = $(this).prev().prev().closest("div").find('span'); 

    console.log(blah); 
    }); 
}); 

HTML：あなたは（それがそのタグのデータを持っていないように）していないようです、私がこれまで持って

JSコードを参照するための

JSFIDDLE ：

<div class="input-group" style="margin-top: 40px;"> 
    <span data-id="Writter Status" style="color: rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase; text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; left: 13px; top: 14px; width: 300px; letter-spacing: 1px;">Writter Status</span> 
    <span id="lblBG" style="box-shadow: 0px 5px 6px -4px rgba(0,0,0,0.55);border-radius: 4px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: 7px; top: 14px; width: 98px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);"></span> 
    <div class="input-group-addon" style="width: 33px;"> 
     <img src="data:image/svg+xml;base64,PD94bWw..." id="iconImg_currentUsers" style="width: 20px; height:20px;"> 
    </div> 
    <div class="col-sm-10"> 
     <span id="inventory" class="tips form-control input-sm" data_tooltip="example 1" style="width: 500px; background-color: rgb(254, 231, 231); height: 37px;" data-cnt="0"><div class="select3-multiple-input-container"> 
     <span class="select3-multiple-selected-item" data-item-id="1" style="padding-right: 5px;">Pending</span> 
     <span class="select3-multiple-selected-item" data-item-id="2" style="padding-right: 5px;">Approved</span> 
     <span class="select3-multiple-selected-item" data-item-id="3" style="padding-right: 5px;">Denied</span> 
     <span class="select3-multiple-selected-item" data-item-id="ADDtab_138269500" style="padding-right: 5px; background-color: rgb(40, 177, 40); z-index: 50;" data-popmodal_id="185">ADD ITEM</span> 
     <div style="top: 23px; left: 168.344px;" data-popmodal_id="185" data-popmodal="open" class="popModal animated bottomLeft fadeInBottom"> 
     </div> 
     <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input" placeholder="" style="width: 678px; background-color: rgb(255, 255, 255);"><span class="select3-multiple-input select3-width-detector"></span> 
     <div class="clearfix"></div> 
    </div> 
    </span> 
</div> 
</div> 
<div id=""></div> 

私はトップスパからデータ-ID =「Writterステータス」の値を取得している達成するために探していますnタグ。

Answer 1

これは、両方の要素の最も近い親コンテナにあるボタンからDOMを上に移動することです達成するための最も簡単な方法は、find()spanあなたはこのように、からdata-idを読みたい：

$('[data-item-id="ADDtab_138269500"]').click(function() { 
 
    var id = $(this).closest("div.input-group").find('span[data-id]').data('id'); 
 
    console.log(id); 
 
});

.input-group { 
 
    margin-top: 40px; 
 
} 
 

 
.input-group .status { 
 
    color: rgb(255, 46, 49); 
 
    position: absolute; 
 
    z-index: 8; 
 
    text-transform: uppercase; 
 
    text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 10px; 
 
    left: 13px; 
 
    top: 14px; 
 
    width: 300px; 
 
    letter-spacing: 1px; 
 
} 
 

 
.input-group .input-group-addon { 
 
    width: 33px; 
 
} 
 

 
.input-group .input-group-addon img { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 

 
.input-group .select3-multiple-selected-item { 
 
    padding-right: 5px; 
 
} 
 

 
.input-group .select3-multiple-selected-item.highlight { 
 
    background-color: rgb(40, 177, 40); 
 
    z-index: 50; 
 
} 
 

 
.input-group .popModal { 
 
    top: 23px; 
 
    left: 168.344px; 
 
} 
 

 
.input-group .select3-multiple-input { 
 
    width: 678px; 
 
    background-color: rgb(255, 255, 255); 
 
} 
 

 
#lblBG { 
 
    box-shadow: 0px 5px 6px -4px rgba(0, 0, 0, 0.55); 
 
    border-radius: 4px; 
 
    border: 1px solid rgba(204, 204, 204, 1); 
 
    border-image: none; 
 
    left: 7px; 
 
    top: 14px; 
 
    width: 98px; 
 
    height: 16px; 
 
    position: absolute; 
 
    z-index: 3; 
 
    background-color: rgba(238, 238, 238, 1); 
 
} 
 

 
#inventory { 
 
    width: 500px; 
 
    background-color: rgb(254, 231, 231); 
 
    height: 37px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group"> 
 
    <span data-id="Writter Status" class="status">Writter Status</span> 
 
    <span id="lblBG"></span> 
 
    <div class="input-group-addon"> 
 
    <img src="data:image/svg+xml;base64,PD94bWw..." id="iconImg_currentUsers"> 
 
    </div> 
 
    <div class="col-sm-10"> 
 
    <span id="inventory" class="tips form-control input-sm" data_tooltip="example 1" data-cnt="0"> 
 
     <div class="select3-multiple-input-container"> 
 
     <span class="select3-multiple-selected-item" data-item-id="1">Pending</span> 
 
     <span class="select3-multiple-selected-item" data-item-id="2">Approved</span> 
 
     <span class="select3-multiple-selected-item" data-item-id="3">Denied</span> 
 
     <span class="select3-multiple-selected-item highlight" data-item-id="ADDtab_138269500" data-popmodal_id="185">ADD ITEM</span> 
 
     <div data-popmodal_id="185" data-popmodal="open" class="popModal animated bottomLeft fadeInBottom"></div> 
 
     <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input" placeholder="" /> 
 
     <span class="select3-multiple-input select3-width-detector"></span> 
 
     <div class="clearfix"></div> 
 
     </div> 
 
    </span> 
 
    </div> 
 
</div>

可能な場合

また、あなたは本当に、インラインスタイルを使用すべきではありません。上記の例のようにCSSルールを外部スタイルシートに抽出します。どのくらいクリーンなHTMLを読んで理解するか注意してください。

最後に、divの要素はspan要素の子にできないため、現在のところHTMLは無効です。