简体   繁体   中英

How to identify a previous span element inside a div in java script

In my application i have two div's. First div contains a span inside it. Second div is collection of 5 div element. While clicking any one of 3 div's in the second div i want to know/find the first div that is a id of span inside that div. Please any one help me to solve this.

EDITED: HTML

<ul>

  <li>

            <div class="fleft">
              <span id="user_id" class="no-class"> User</span>
            </div>
             <div style="display: inline-block;">                  
                  <div class="info left no-class section">Jan</div>

            </div>
  </li>
 <li>

            <div class="fleft">
              <span id="user_id" class="no-class"> User</span>
            </div>
             <div style="display: inline-block;">                  
                  <div class="info left no-class section">Jan</div>

            </div>
  </li>
<ul>

JS

$('.info').click(function(event){
});

Note: In my second div i have 3 elements (original code contains a loop to create 3 div's).In that div I m able to get the next and previous div using prev();, next();. But unable to find the span with id of user_id .

Edited: In one li i have two div's. Div1

<div class="fleft"><span id="user_id_1"></span></div>

Div2

 <div class="right">
     <div class="info left no-class section> Jan</div>
     <div class="info left no-class section> Feb</div>
     <div class="info left no-class section> March</div>
 </div>

While clicking the Jan/Feb/March I want to know the id of span that is inside the DIV1.

UpdtedFiddle: http://jsfiddle.net/uj8ox3o1/2/

If I understand properly you want to find the associated value of the user-id span...

HTML:

 <ul>
    <li>
        <div class="fleft"> <span id="user_id1" class="no-class"> User</span>
        </div>
        <div style="display: inline-block;">
            <div class="info left no-class section">Jan</div>
            <div class="info left no-class section">Feb</div>
            <div class="info left no-class section">Mar</div>
            <div class="info left no-class section">Apr</div>
        </div>
    </li>
    <li>
        <div class="fleft"> <span id="user_id2" class="no-class"> User</span>
        </div>
        <div style="display: inline-block;">
            <div class="info left no-class section">Jan</div>
            <div class="info left no-class section">Feb</div>
            <div class="info left no-class section">Mar</div>
            <div class="info left no-class section">Apr</div>
        </div>
    </li>
</ul>

JS:

$('.info').click(function (event) {
   var id = $(this).closest('li').find('.fleft span[id]').attr('id');
   alert(id);
});

This will alert the value of the id specified on your span , no matter which of the month div s you click

* Updated fiddle *

<ul>

  <li>

            <div class="fleft">
              <span id="user_id" class="no-class"> User</span>
            </div>
             <div style="display: inline-block;">                  
                  <div class="info left no-class section">Jan</div>

            </div>
  </li>
 <li>

            <div class="fleft">
              <span id="user_id" class="no-class"> User</span>
            </div>
             <div style="display: inline-block;">                  
                  <div class="info left no-class section">Jan</div>

            </div>
  </li>
<ul>


 <script type="text/javascript">
     $(document).ready(function(){
      $("ul li div span").click('on',function(){
       $id=$(this).attr('id');
                    alert($id);
    });
    });
   </script>

demo jsfiddle .

In JS

$('.info').click(function(event){
   parent_element = this.parentNode;
   adjacent_element = $(parent_element).prev();
   adjacent_element.children('span')[0].id;
});

please describe your problem more clear
this is I get :
if your clicked element have ID of your wanted span is get easier

$('.info').click(function(event){
$(this).parents('div.fleft').find('span#ID')
});

this is what I get from your question :|

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM