Question

我的代码有问题，我想获取（SELECTED）类的2列表数据的值。

首先需要单击第一个表的表行以获取值并添加所选的类。我的功能看起来像这样。

$('#edit_chainingBuild').on('click','tr.clickable-row  td:not(:first-child)',function(e){
           $(this).closest('tr.clickable-row').find('td:not(:first-child)').addClass('selected');
      });

现在，第一个表和单击的表行具有选定的类，通过单击第二个表，我想确定具有选定的类的表数据的值是什么。

注意：我要获取具有所选表数据类的表的第二列。

现在在我的第二个函数中，我要提醒所选类的值

$("table#edit_table_chaining_condiments tr").click(function(e){

          var x = $('table#edit_chainingBuild tbody tr.clickable-row td.clickable-row-condiments.selected td:nth-child(2)').text();


          alert(x);


      });

我的HTML：

<div class="modal fade" id="EditchainingBuilderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog modal-lg role="document" style="float:right; height:700px; width:490px; ">
    <div class="modal-content">
          <div class="modal-header" style="background: linear-gradient(-30deg, #00e4d0, #5983e8); color:white;">
            <h5 class="modal-title edit_noun_build_item" id="exampleModalLongTitle" style="color:white;"></h5>
            <button type="button" class="close" id="closeBuildChainUpdate" data-dismiss="modal" aria-label="Close" style="">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body">

            <div class="container">
                <div class="header" style="text-align: center;">
                    <br>
                    <h3>Build Your Chain Button</h3>    
                    <label>This button will be served as customers menu.</label><br>
                    <i class="fab fa-creative-commons-remix" style="font-size:70px;"></i>
                    <br><br>

                    <input type="hidden" value="" class="edit_hidden_noun_id" name="">
                    <table class="table table-hover" id="edit_chainingBuild">
                        <thead>
                            <tr style="font-size: 15px;">
                                <th scope="col">Qty</th>
                                <th scope="col">Condiments</th>
                                <th scope="col">Price</th>
                            </tr>
                        </thead>
                        <tbody style="font-size:14px;">                 

                        </tbody>
                    </table>
                </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="edit_build_success_insert btn btn-primary">Build Done</button>
          </div>
    </div>
  </div>
</div>

我输出的是由于添加了所选类，因此表行已突出显示。

Answer 1

您必须了解选择器的工作原理。

当您拥有$("selector1 selector2")时，jQuery会寻找selector2的子项selector1。

在您这里很长的那一个中，它的尽头看上去是

$('table#edit_chainingBuild tbody tr.clickable-row td.clickable-row-condiments.selected td:nth-child(2)')

jQuery正在寻找td的第二个子元素td，它的类为clickable-row-condiments和selected ...

看到错误了吗？ （除非您在另一个td中有一些td ...这将是无效的。）

因此，请尝试简化一下内容……您太具体了，由于难以阅读，因此会导致错误。您不必列出所有祖先。.首先定位选定的元素：

$('#edit_chainingBuild .selected')

您知道这里有两个selected元素...像这样使用.eq()来定位正确的元素：

$('#edit_chainingBuild .selected').eq(1) // That is zero-based!

然后，您可以使用.text()。

祝你好运！

如何使用jQuery

1 个答案: