jquery识别连续元素

Question

我是JQ的新手。我有一张桌子，每一行都有一个像<tr id="123">这样的独特ID。

我在该行的其中一个字段中有一个编辑按钮，我想将该行变成一个表单。

如何获取该行中每个字段的所有值？

以下是表格现在的样子。

<tr id="e2c420d928d4bf8ce0ff2ec19b371514"> 
    <td><div id="item_name">asdf (asdf)</div></td> 

    <td><div id="edit">Edit</div></td> 

    <td><div id="item_description">asdf</div></td> 

    <td><div id="item_price">1234</div></td> 

    <td><div id="item_qty">1</div></td> 

    <td><div id="item_total">1234</div></td> 
</tr> 

<tr id="b2x4123928d4bf8ce0ff2ec19b372138"> 
    <td><div id="item_name">asdf (asdf)</div></td> 

    <td><div id="edit">Edit</div></td> 

    <td><div id="item_description">asdf</div></td> 

    <td><div id="item_price">1234</div></td> 

    <td><div id="item_qty">1</div></td> 

    <td><div id="item_total">1234</div></td> 
</tr> 

Answer 1

我认为你应该使用类和data-id属性，但它取决于你。

<table id="myTable"> 
    <tr data-id="e2c420d928d4bf8ce0ff2ec19b371514"> 

     <td><div class="item_name">asdf (asdf)</div></td> 

     <td><div class="edit">Edit</div></td> 

     <td><div class="item_description">asdf</div></td> 

     <td><div class="item_price">1234</div></td> 

     <td><div class="item_qty">1</div></td> 

     <td><div class="item_total">1234</div></td> 
    </tr> 

    <tr data-id="b2x4123928d4bf8ce0ff2ec19b372138"> 
     <td><div class="item_name">asdf (asdf)</div></td> 

     <td><div class="edit">Edit</div></td> 

     <td><div class="item_description">asdf</div></td> 

     <td><div class="item_price">1234</div></td> 

     <td><div class="item_qty">1</div></td> 

     <td><div class="item_total">1234</div></td> 
    </tr> 
</table> 

你需要

$('#myTable').delegate('.edit', 'click', function() { 
    var trElem = $(this).closest('tr'); 
    name = trElem.find('div.item_name').text(); 
    // etc... 
}); 

了解更多的关于.delegate和.closest是（假设你正在使用jQuery 1.4.2+）是什么。他们使用较少，但很棒的方法。

Answer 2

这是从你的问题你想要做什么有点不清楚，但这将所有的值加载到一个对象：

var values = {}; 
$("#e2c420d928d4bf8ce0ff2ec19b371514 div").each(function() { 
    var div = $(this); 
    values[div.attr("id")] = div.html(); 
} 

，你就可以参考这样的价值观：

var itemName = values["item_name"]; 

在变化这个问题是光，你需要做什么：

$("div#edit").click(function() { 
    $("div", this).each(function() { 
     var div = $(this); 
     if(div.attr("id") !== "edit") { 
      var input = $('<input type="text" />').attr("name", div.attr("id")).val(div.html()); 
      div.replaceWith(input); 
     }   
    } 
} 

你可能会想的div的ID改为类（与div.attr("class")和$("div#edit")与$("div.edit")取代div.attr("id")，因为你只能有每页一个ID的一个实例。您也可能想要检查您处理的每个div的ID（使用switch块）并在每种情况下创建不同类型的输入（取决于您的需要）。