如何在jquery中从循环元素中获取特定值

我循环使用html，希望在用户单击按钮时获得特定的字段值。 我正在让headahce检索正确的值，请帮助我

<div id="tabs1">
<table>
{foreach from=$this->products item=p}               
<tr>
<td><div class="tabs-product">
<div>
<input type='hidden' id='item' name='item' value='{$p.name}'/>
<input type='hidden' id='price' name='price' value='{$p.price}'/>
<button class="shareButton" onclick='post(); return false;'>Share</button>
</div></td></tr>
{/foreach}
</table></div>

<script>
 function post() {
    var item =  $(this).parent("tabs-product").attr("input");//this cause undefined
    var price = $('#price').val(); //this method only get first value
    alert(item + price);
}
</script>

{foreach from=$this->products item=p}
分享
{/foreach}
职能职位（）{
var item=$（this）.parent（“制表符产品”）.attr（“输入”）；//这导致未定义
var price=$（'#price'）.val（）；//此方法仅获取第一个值
警报（项目+价格）；
}

您需要对代码进行一些基本更正

• 将

  单击
  事件与
  jQuery
  绑定，以通过
  $（this）
  获取jQuery对象
  

• 您还需要使用。对于类选择器。在您的代码中，父项（“制表符产品”）应该是父项（“制表符产品”）

• 带有类标签的div产品不是按钮的父项，而是您需要转到父项td并查找项目和价格

• id在页面中应该是唯一的，您将对商品和价格重复使用相同的id

$（'.shareButton'）。单击（函数（）{

}))

要像前面提到的那样使用

javascript onclick绑定

，需要将源对象传递给post，并在

post

中将其转换为jQuery对象

<button class="shareButton" onclick='post(this); return false;'>Share</button>

function post(obj) {
     var item =  $(this).closest('td').find("#item").va();//undefined
    var price = $(this).closest('td').find("#price").va()
    alert(item + price);
}

共享
职能职位（obj）{
var item=$（this）.closest（'td'）.find（#item”）.va（）//未定义
var price=$（this）.closest（'td'）.find（#price”）.va（）
警报（项目+价格）；
}

您需要对代码进行一些基本更正

• 将

  单击
  事件与
  jQuery
  绑定，以通过
  $（this）
  获取jQuery对象
  

• 您还需要使用。对于类选择器。在您的代码中，父项（“制表符产品”）应该是父项（“制表符产品”）

• 带有类标签的div产品不是按钮的父项，而是您需要转到父项td并查找项目和价格

• id在页面中应该是唯一的，您将对商品和价格重复使用相同的id

$（'.shareButton'）。单击（函数（）{

}))

要像前面提到的那样使用

javascript onclick绑定

，需要将源对象传递给post，并在

post

中将其转换为jQuery对象

<button class="shareButton" onclick='post(this); return false;'>Share</button>

function post(obj) {
     var item =  $(this).closest('td').find("#item").va();//undefined
    var price = $(this).closest('td').find("#price").va()
    alert(item + price);
}

共享
职能职位（obj）{
var item=$（this）.closest（'td'）.find（#item”）.va（）//未定义
var price=$（this）.closest（'td'）.find（#price”）.va（）
警报（项目+价格）；
}

• input

  是一个元素，而不是一个属性
• 您不能像在

  $（“#price”）

  中那样使用绝对ID，因为您有多个元素具有相同的ID（通过循环打印）——这在规范中是非法的（但在宽松的浏览器中是允许的），而且是无用的
• 使用

  input[name=“…”]

  选择器，您可以确定您实际需要的产品中的

  input

  元素
• 在这种情况下，

  parent

  和

  closest

  同样有效，但我更喜欢

  closest

  在这种情况下的灵活性，如果您改变了对结构的看法，并决定插入一个额外的元素（出于布局或其他任何原因）编辑：正如TJ在评论中指出的那样，我错过了，这正好说明了这一点

• input

  是一个元素，而不是一个属性
• 您不能像在

  $（“#price”）

  中那样使用绝对ID，因为您有多个元素具有相同的ID（通过循环打印）——这在规范中是非法的（但在宽松的浏览器中是允许的），而且是无用的
• 使用

  input[name=“…”]

  选择器，您可以确定您实际需要的产品中的

  input

  元素
• 在这种情况下，

  parent

  和

  closest

  同样有效，但我更喜欢

  closest

  在这种情况下的灵活性，如果您改变了对结构的看法，并决定插入一个额外的元素（出于布局或其他任何原因）编辑：正如TJ在评论中指出的那样，我错过了，这正好说明了这一点

---

好的，我看到你的代码了，你做错了。您迭代并创建具有相同ID的元素，这根本不是好的实践。因此，我建议您使用

class

属性并使用

Jquery.first（）

{foreach from=$this->products item=p}
分享
{/foreach}
职能职位（）{
var item=$（this）.parent（“制表符产品”）.attr（“输入”）；//未定义
var price=$（'.price'）.first（）.val（）；//仅获取第一个值
警报（项目+价格）；
}

其他人的答案是可以的，但是拥有多个相同的ID并不是很好，尤其是在使用Jquery时

JQuery.first（）

reference

---

JQuery.first（）

这里的示例用法
好的，我看到了你的代码，你做得不对。您迭代并创建具有相同ID的元素，这根本不是好的实践。因此，我建议您使用

class

属性并使用

Jquery.first（）

{foreach from=$this->products item=p}
分享
{/foreach}
职能职位（）{
var item=$（this）.parent（“制表符产品”）.attr（“输入”）；//未定义
var price=$（'.price'）.first（）.val（）；//仅获取第一个值
警报（项目+价格）；
}

其他人的答案是可以的，但是拥有多个相同的ID并不是很好，尤其是在使用Jquery时

JQuery.first（）

reference

---

JQuery.first（）

此处的示例用法
不要将

onclick='post（）'

与jqueryy一起使用您的循环将不会保持元素的

id

唯一。这不好。@PankitKapadia不需要id Ithink@eicto-

var price=$（'#price'）.val（）。为了这个。这只是一个建议当
$（this.parent（）.children（'[name]）时，它将起作用
var $product = $(this).closest('.tabs-product');
var item = $product.find('input[name="item"]').val();
var price = $product.find('input[name="price"]').val();

<div id="tabs1">
<table>
{foreach from=$this->products item=p}               
<tr>
<td><div class="tabs-product">
<div>
<input type='hidden' class='item' name='item' value='{$p.name}'/>
<input type='hidden' class='price' name='price' value='{$p.price}'/>
<button class="shareButton" onclick='post(); return false;'>Share</button>
</div></td></tr>
{/foreach}
</table></div>

<script>
 function post() {
    var item =  $(this).parent("tabs-product").attr("input");//undefined
    var price = $('.price').first().val(); //get only first value
    alert(item + price);
}
</script>