JQuery Prev() den letzten 3 Tag-Namen zu erhalten Attributdaten

Question

Hey alles, was ich den Weg, um herauszufinden, ich versuche, von denen es für mich von einem Button-Klick auf den ADDtab_138269500 ​​ und zurück(iV gehen zu gehen, nimmt) den ganzen Weg zu der span Tag wird es zum ersten gehen Backwords.

JSFIDDLE für Sie

Der JS-Code zu sehen, habe ich so weit, dass es nicht zu sein scheint (wie es für diesen Tag keine Daten haben):

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

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

Die HTML :

<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> 

Was ich suche den Wert Daten id = "Writter-Status" von oben Spa zu erreichen wird immer n Tag.

Answer 1

Die einfachste Methode, dies zu erreichen, wäre das DOM von der Taste zum nächsten übergeordneten Container beider Elemente zu gehen, dann find() die span Sie die data-id aus, wie diese lesen wollen:

$('[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>

Außerdem sollten Sie Inline-Styling möglichst nicht verwenden. Extrahieren Sie Ihre CSS-Regeln wie im obigen Beispiel in ein externes Stylesheet. Beachten Sie, wie viel sauberer HTML zu lesen und zu verstehen ist.

Schließlich ist Ihr HTML derzeit ungültig, da div Elemente keine Kinder span Elemente sein können.