Rahul Singh Rahul Singh - 2 months ago 7
HTML Question

How to get text from specific span from multiple elements

Hello Friends I have span with class .amount how can i get price from this span i have tried but i am not able to point out the exact location

Html

<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" type="radio">
<label for="tmcp_choice_14_2_39">
<img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span>
</label>
<span class="price tc-price hidden">
<span class="amount">500</span>
</span>

</li>


Javascript

$('.fabric-layer-pattern').click(function() {
var spanEl1 = $(this).parent('li.radio').find('span.amount');
var priceee = spanEl1.text(); //Get text
console.log(price);
// this alert is coming two times empty after that price will come
alert(priceee);
});


Updated Html Code

<ul>



<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>

<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>



<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_1_38"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>

</li>

<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_2_39"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>

</li>

</ul>


please suggest something...

Answer

Use parent() and find() to have specific element from multiple elements.

var spanEl = $(this).parent('li').find('span.amount');
var price = spanEl.text(); //Get text
console.log(price);

/*$('.fabric-layer-pattern').click(function() {
     var spanEl = $(this).parent('li').find('span.amount');
     var price = spanEl.text(); //Get text
     console.log(price);
});*/
 $('.fabric-layer-pattern').click(function() {
 var spanEl1 = $(this).parent('li.radio').find('span.amount');
 var priceee = spanEl1.text(); //Get text
     console.log(priceee);
    // this alert is coming two times empty after that price will come 
     alert(priceee);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>



<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test  tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy  radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
  <span class="tc-label radio_image_label">Elegant</span></label>   

    <span class="price tc-price  hidden"><span class="amount">500</span>      </span>       
   </li>



  <li class="radio">
        <input class="tmcp-field nav nav-pills fabric-layer-pattern test  tm-product-image tm-epo-field tmcp-radio use_images"  type="radio">
  <label for="tmcp_choice_14_1_38"><img class="tmlazy  radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
   <span class="tc-label radio_image_label">Elegant</span></label>  
      <span class="price tc-price  hidden"><span class="amount">600</span>   </span>        

 </li>

 <li class="radio">
  <input class="tmcp-field nav nav-pills fabric-layer-pattern test  tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
  <label for="tmcp_choice_14_2_39"><img class="tmlazy  radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
  <span class="tc-label radio_image_label">Elegant</span></label>   
 <span class="price tc-price  hidden"><span class="amount">700</span>     </span>       

</li>

</ul>