Question

我在选项卡和表格内有一个Bootstrap选项卡和一个表，一行包含输入字段。我遇到的问题是当我在表中有多行时，只有第一行值被拉。我正在使用'壁橱'和'找'但我没有得到所需的值。我做错了什么？

<ul class="nav nav-tabs nav-justified itemTab">
<li><a href="#tab5" data-toggle="tab">Inbox</a></li> 
<li><a href="#tab6" data-toggle="tab">Outbox</a></li>
</ul>
<div class="tab-content itemTab">
<div class="tab-pane fade in" id="tab5">
    <table class="table table-condensed" id="utable">
        <th>Location</th>
        <th>Department</th>
        <th>HD Number</th>
    @foreach (var item in Model.items)
    {
        <tr class="@item.Id">
        <div class="accordian-body collapse in" id="@item.Id">
            <input type="text" class="form-control" id="loc">
            <input type="text" class="form-control" id="dept">
            <input type="text" class="form-control" id="hdnum">
        </div>
         <div class="row">
            <div align="center">
            <input type="submit" value="Transfer" class="btn btn-success" onclick="MoveItem(@item.Id)" id="moveButton" data-url="@Url.Action("Submit", "Item")" />
            </div>
        </div>
        </tr>
    }
    </table>
    </div>
    <div class="tab-pane fade in" id="tab6">
    @Html.Action("Outbox", "Item") 
    </div>


   function MoveItem(id) {
   var row = $('#' + id).closest('.itemTab');
   var loc = $(row).find('#loc').val();
   var dept = $(row).find('#dept').val();
   var hdnum = $(row).find('#hdnum').val();
   }

Answer 1

首先，在为id调用生成参数时，将MoveItem值包装在引号中：

onclick="MoveItem('@item.Id')"

其次，将您的重复ID更改为类，并且仅上升到父tr：

<input type="text" class="form-control" class="loc">

function MoveItem(id) {
  var row = $('#' + id).closest('tr');
  var loc = $(row).find('.loc').val();
}

Answer 2

你最近的

function tabToAccordion(){
    var navTab = $(".nav-tabs"),
        tabContent = $(".tab-content");
        // hiding the navtabs
    navTab.hide();
    // appending each link to respective tab-pane
        navTab.find("li").each(function(){
            var destination = $($(this).find(".nav-link").attr("href"));
            var anchor = $(this).find(".nav-link");
            // removing unused attributes and adding tabContent-toggler class
            anchor.removeAttr("data-toggle role aria-controls aria-selected").addClass("tabContent-toggler").insertBefore(destination);
        });
    var tabToggler = $('.tabContent-toggler'),
    tabPane = tabContent.find(".tab-pane"),
    // get all classes in tab pane for further usage and replace tab-pane with empty data
    nonActiveTabPane = tabContent.find(".tab-pane:not(.active)").attr("class");
    tabPaneClass = tabPane.attr('class');
    tabPaneClass = tabPaneClass.replace(nonActiveTabPane,"");
    tabToggler.click(function(e){
        // get the destination of clicked element
        var destination = $($(this).attr("href"));
        // if not this element then remove active class
        $(this).parent().find(tabToggler).not($(this)).removeClass("active");
        //if not clicked destination then remove all other class except tab-pane
        $(this).parent().find('.tab-pane').removeClass(tabPaneClass);
        // now toggle active class
        $(this).toggleClass("active");
        // also toggle all other class in tab-pane
        destination.toggleClass(tabPaneClass);
        // if this element dont have active class then remove all other class from tab-pane
        if(!$(this).hasClass("active")){
            destination.removeClass(tabPaneClass);
        }
        // first element of nested tab-pane should be active
        if(destination.has(tabToggler)){
            var tabTogglerFirstChild = destination.find(".tabContent-toggler:first-child"),
            tabTogglerFirstDestination = $(tabTogglerFirstChild.attr("href"));
            tabTogglerFirstChild.addClass("active");
            tabTogglerFirstDestination.addClass(tabPaneClass);
        }
        // preventing default behaviour of element
        e.preventDefault();
    });
}
// check if device is mobile and if so only run the function
if(/Mobi/.test(navigator.userAgent)){
    tabToAccordion();
}

获取标签 - 但所有“行”都在该标签中。

相反，获取“行”

var row = $('#' + id).closest('.itemTab');

然后查找将在相关行中找到该项目。

最近，发现不工作的jquery

2 个答案: