logo标签列表

jQuery：访问锚标记相邻元素的值

javascripthtmljquery
3
我有以下元素结构： 

<div class="qty-adjust-inner">
    <a class="btn btn-min">
        <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font>
    </a>
    <div class="value">
        <input type="hidden" value="1" />
        <span data-bind="text: $parent.qty" class="qty_value">
            <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;" class="">120</font></font>
        </span>
    </div>
    <a class="btn btn-plus">
        <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font>
    </a>
</div>

我需要在 .btn-min 和 .btn-plus 类的按钮上增加/减少值为“120”的数值。
我尝试使用 var value = $('.btn-min').find('.value').html(); 来访问数值，也尝试过使用 find 和 children 方法，但是没有得到结果。 编辑：如 @Taplar 所指出的，数值部分并不是锚点标签的子元素。问题在于有很多类似的锚点标签，我需要增加相邻的下一个带有类 value 的数值。
3
该值不是 a 标签的子元素。 - Taplar
你不能只是给 font 元素添加一个类名叫做“valueContainer”，然后使用 .valueContainer 进行选择吗？ - Rocky Sims
@Taplar 我太紧张了，以至于错过了它 :( 非常感谢！ - GenZ Dev
@SufyanKhot 这就是为什么正确缩进HTML语法以视觉化展示嵌套结构非常重要的原因，;) - Taplar
5个回答
2
由于包含.value类的元素是包含.qty-adjust-inner的元素的子元素，因此您可以搜索类似以下内容的东西。
   $('.qty-adjust-inner').find(".value").find('span').text().trim()
有许多类似这样的锚标签，我需要获取与锚相邻的元素的值。 - GenZ Dev
1
代码在这种情况下仍将有效，只是您会得到以空格分隔的值，例如“120 130”，如果130存在于另一个标记中。 - Asutosh
1
你可以给 class="values" 赋值，以便轻松获取值，例如：120，然后检查被点击的按钮是否有类名 btn-minus 或 btn-plus，根据情况增加或减少值。 演示代码：: 

$(" .btn").click(function() {
//get closest div with class qty-adjust-inner -> find .values
var selector =$(this).closest(".qty-adjust-inner").find(".values");
  var values = parseInt(selector.text());
  //check if it has class btn-min
  if ($(this).hasClass("btn-min")) {
    values--;//subtract by 1

  } else if($(this).hasClass("btn-plus")) {
    values++;//add by 1
  }
 selector.text(values)//put value again

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qty-adjust-inner">
  <a class="btn btn-min">
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">-</font>
    </font>
  </a>
  <div class="value">
    <input type="hidden" value="1">
    <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                    <!--give class-->
                      <font style="vertical-align: inherit;" class="values">120</font></font></span>
  </div>
  <a class="btn btn-plus">
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">+</font>
    </font>
  </a>
</div>

1

放轻松

只需为该元素添加一个id即可。

Demo : 

$(document).on("click",".btn-min",function(){
    let value =  parseInt($(".value #result").html());
    $(".value #result").html(value-1);
});

$(document).on("click",".btn-plus",function(){
    let value = parseInt($(".value #result").html());
    $(".value #result").html(value+1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="qty-adjust-inner">

     <a class="btn btn-min">
       <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">-</font>
       </font>
     </a>
     
     
      <div class="value">
          <input type="hidden" value="1">
          <span data-bind="text: $parent.qty" class="qty_value">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;" id="result">120</font>
              </font>                 
          </span>
      </div>

            
     <a class="btn btn-plus">
       <font style="vertical-align: inherit;">
      ´ <font style="vertical-align: inherit;">+</font>     
      </font>
     </a>
     
     
</div>

我无法为该元素添加ID，因为HTML是动态生成的。 - GenZ Dev
1
你可以使用 $(".value").find('span font:last').html()。 - Hasan_Naser
1

...有许多类似这样的锚点，我需要获取与锚点相邻的元素的值

根据评论，您可以结合.next('.value'), .prev('.value')：

var ele = ($(this).next('.value').length > 0) ? $(this).next('.value') :
                                                          $(this).prev('.value');
 +ele.find('span font:last').text();


$('.btn-min, .btn-plus').on('click', function(e) {
    var ele = ($(this).next('.value').length > 0) ? $(this).next('.value') : $(this).prev('.value');
    var val = +ele.find('span font:last').text();
    if (this.classList.contains('btn-plus')) {
        val++;
    } else {
        val--;
    }
    ele.find('span font:last').text(val);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="qty-adjust-inner">
    <a class="btn btn-min"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font></a>
    <div class="value">
        <input type="hidden" value="1">
                <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;" class="">120</font></font></span>
    </div>
    <a class="btn btn-plus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a>
    <br/>
    <a class="btn btn-min"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font></a>
    <div class="value">
        <input type="hidden" value="1">
                <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;" class="">220</font></font></span>
    </div>
    <a class="btn btn-plus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a>
    <br/>
    <a class="btn btn-min"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font></a>
    <div class="value">
        <input type="hidden" value="1">
                <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;" class="">320</font></font></span>
    </div>
    <a class="btn btn-plus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a>
</div>

1

非常感谢大家在这里帮助我！

特别感谢Taplar指出value标签不是锚标签的子元素，而是与其相邻的。由于有许多这样的锚标签，我必须每次获取相邻元素的值。

Daniel Szalay的答案对我很有帮助。我使用以下代码找到相邻的元素：

 $(document).on("click","a[class='btn btn-min']", function (e) {
      //decrement product qty by 1
      // var value = $('.value').find('span').text().trim();
      var value =$(this).next().find('span').text().trim();
  });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接