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

＆＃13;

/*$('.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);
    });

＆＃13;

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

＆＃13;

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。此外，您可以考虑使用更改事件，而不是单击事件。根据这些考虑，我更新了片段。

您可以使用closest：

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

摘录：

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

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

5 个答案: