如何从多个元素中获取特定范围的文本

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

你好朋友我有班级.amount我如何从这个跨度获得价格我已经尝试但我无法指出确切的位置

Html

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

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

更新了Html代码

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

请建议一些事情......

5 个解决方案

#1

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

使用parent（）和find（）从多个元素中获取特定元素。

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>

#2

Try using siblings():

尝试使用兄弟姐妹（）：

$('.fabric-layer-pattern').click(function() {
     var spanEl = $(this).siblings().filter("span.amount");
     var price = spanEl.text(); //Get text
});

$(this) inside the event scope is the radio input itself and span.amount is not inside it.

事件范围内的$（this）是无线电输入本身，而span.amount不在其中。

Demo

演示

#3

UPDATE

UPDATE

I have tried but in third alert i am getting price before that empty alert is coming

我已经尝试了，但在第三次警报中我得到的价格在空警报即将到来之前

This can have different meanings. With only this comment I may figure out the price value is changed outside and you are interested in that event. If it is so, you may refer to MutationObserver. Moreover, instead of click event you may consider to use the change event. According to this considerations I updated the snippet.

这可能有不同的含义。只有这个评论，我可能会发现价格值在外面改变了，你对这个事件很感兴趣。如果是这样，您可以参考MutationObserver。此外，您可以考虑使用更改事件，而不是单击事件。根据这些考虑，我更新了片段。

You may use closest:

你可以使用最近的：

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素

The snippet:

片段：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes.length > 0) {
      $('.fabric-layer-pattern').trigger('click');
    }
  });
});
observer.observe($('li.radio span.amount').get(0), { attributes: true, childList: true });

// later, you can stop observing
// observer.disconnect();


$('#myBtn').on('click', function(e) {
  $('li.radio span.amount').text(Date.now());
});



$('.fabric-layer-pattern').on('click', function() {
  var spanEl = $(this).closest('li.radio').find('span.amount');
  var price = spanEl.text(); //Get text
  console.log('span.amount is: ' + price);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" id="myBtn">Change price</button>
<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>

#4

I guess this will do:

我想这会做：

// Just to be specific
$(".fabric-layer-pattern + span.price > span.amount").text();

#5

Try this code

试试这个代码

$('.fabric-layer-pattern').click(function() {
     var price = $('span.amount').text();         
});