Javascript JQuery：查找（索引）具有特定数据属性值的行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14166557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Find (the index of) a row with a specific data attribute value
提问by murielg
I am trying to append a string, myoutput, right after a specific row in a table similar to this one:
我正在尝试在类似于此表的特定行之后附加一个字符串 myoutput：
<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>
So let's say I want to append my output string after the tr with data-my_other_id='2'(note that in my code, my_other_id = 2already )
所以假设我想在 tr 之后附加我的输出字符串data-my_other_id='2'（注意，在我的代码中，my_other_id = 2已经）
I am trying to accomplish it doing this:
我正在尝试这样做：
var want = $("tr").find("[data-my_other_id='" + my_other_id + "']").index();
after finding the index, I want to append my output strhing to this row...
找到索引后，我想将我的输出字符串附加到这一行...
$(want).insertAfter(...?);
Also... I noticed whenever I do
另外...我注意到每当我这样做
alert( want = $("tr").find("[data-my_other_id='" + my_other_id + "']").length)
I get 0 ...
我得到0 ...
Help please and let me know if my question is not clear enough so I can explain better.
请帮助，如果我的问题不够清楚，请告诉我，以便我可以更好地解释。
回答by john_omalley
I'm assuming you want to update the content rather than append, but it doesn't really change anything. I don't think you want to use find() that way. Try something like:
我假设您想更新内容而不是追加内容，但这并没有真正改变任何东西。我认为您不想那样使用 find() 。尝试类似：
var $row = $('tr[data-my_other_id="' + id + '"]');
// should be the index of the tr in the <table>
// this may not be a good idea though - what if you add a header row later?
var index = row.index() + 1; // if you want 1-based indices
$row.find("td").text("I am row #" + index);
回答by Travis J
This is because find will no search siblings, only children. Try attaching your search to table.
这是因为 find 不会搜索兄弟姐妹，只会搜索孩子。尝试将您的搜索附加到表格中。
html:
html：
<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>?
js:
js：
var my_other_id = 2;
alert( $("table").find("[data-my_other_id='" + my_other_id + "']").length);?
回答by Justin Bicknell
You don't need to use the find method since the data attribute is on the tr itself. Also your use of index is not going to work. Try the following instead.
您不需要使用 find 方法，因为 data 属性在 tr 本身上。此外，您对索引的使用将不起作用。请尝试以下操作。
$("tr[data-my_other_id='" + my_other_id + "']").insertAfter(...?);
回答by charlietfl
findlooks for descendents. A TRcan not be a descendent of itself.
find寻找后代。ATR不能是它自己的后代。
Try using filter()
尝试使用 filter()
$("tr").filter("[data-my_other_id='" + my_other_id + "']").index();
回答by Muhammad Shahzad
Find in the specific table so it will be faster, you can use this method.
在具体的表中查找所以会更快，可以用这个方法。
Js:
JS：
$('any-button').click(function(){
var id = 23;
var $row = $('.your-class tbody tr[data-id="' + id + '"]');
$row.remove();
});
Html
html
<table class="table table-striped your-class">
<thead>
<tr>...<tr/>
</thead>
<tbody>
<tr data-id="23">Some text</tr>
<tr data-id="43">Some text</tr>
<tr data-id="43">Some text</tr>
</tbody>
</table>
