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

Question

你好朋友，我有跨度类.amount 我怎么能从这个跨度中得到价格我试过但我无法指出确切的位置

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);
    });

更新的 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>

请提出一些建议...

Answer 1

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

Answer 2

尝试使用siblings()：

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

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

Demo

Answer 3

更新

我已经尝试过，但在第三次提醒中，我在那个空提醒到来之前得到了价格

这可以有不同的含义。仅凭此评论，我可能会发现价格值在外部发生了变化，并且您对该事件感兴趣。 如果是这样，您可以参考MutationObserver。此外，您可以考虑使用更改事件来代替点击事件。 根据这个考虑，我更新了sn-p。

你可以使用closest：

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

sn-p：

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>

Answer 4

我想这样可以：

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

Answer 5

试试这个代码

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