JQuery Tree Traversal prev () в TD - PullRequest
Новая
       8

JQuery Tree Traversal prev () в TD

3 голосов
/ 12 марта 2010

Я пытаюсь проверить / снять флажок выбора с помощью jquery в предыдущем TD. Я пытался в течение нескольких часов несколько комбинаций с prev (), parent (), closest (), но все еще безрезультатно ... Вот пример кода: 

<table>
 <tr>
 <td><input type="checkbox" class="resultcheck"></td>
 <td><label class="resultchecklabel">Text 1</label></td>
 </tr>

 <tr>
 <td><input type="checkbox" class="resultcheck"></td>
 <td><label class="resultchecklabel">Text 2</label></td>
 </tr>

</table>

<script>
$('.resultchecklabel').live('click', function() {
 if ($(this).prev('td input:checked').val() != null) 
 {
  $(this).prev('td').prev("input").removeAttr("checked");
 }
 else
 {
  $(this).prev('td').prev("input").attr("checked","checked");
 }
});
</script>

Кто может помочь мне решить этот вопрос? Большое спасибо!

Ответы [ 3 ]

9 голосов
/ 12 марта 2010

@ Адам и @peterendidit ударились о гвоздь по голове - здесь не нужен javascript / jQuery.

Причина, по которой ваш код не работал, вероятно, заключается в том, что this в вашем контексте является элементом label, в то время как td являются родственными элементами друг друга, а не label. Я думаю, что это сделало бы то, что вы хотели, и было бы достаточно, если бы у вас были более сложные требования - скажем, дополнительный стиль и т. Д. 

var cb = $(this).closest('td')  // containing TD
                .prev('td')     // previous TD
                .find('input'); // input within TD
if (cb.find(':checked').length == 0) { // not checked
    cb.attr('checked','checked');
}
else {
    cb.removeAttr('checked');
}
3 голосов
/ 12 марта 2010

реальное решение

используйте ID в сочетании с for: 

 <td><input type="checkbox" id="resultcheck1"></td>
 <td><label for="resultcheck1">Text 2</label></td>

и винт JavaScript:]

Обход дерева:

Вы должны думать об этом как о дереве. Тем не менее, подумайте о области (что у вас есть как $ (это)):

Если вы хотите перейти с resultchecklabel на resultcheck, вам нужно перейти на td => предыдущий td => это ребенок resultcheck.

Переведено в древовидные отношения: parent => previous sibling => child. теперь легко перевести этот английский на jQuery, поскольку он действительно прост: 

var $dest = $(this).parent('td').prev().children('.resultcheck')

Как вы видите, когда вы думаете о намерениях движения по дереву, это в значительной степени английский с круглыми скобками.

пример:

http://jsbin.com/evupu/2

2 голосов
/ 12 марта 2010

Ярлыки не нуждаются в причудливом JavaScript для подключения к элементам ввода. Просто дайте вводу идентификатор и используйте атрибут for на метке: 

<table>
 <tr>
 <td><input type="checkbox" class="resultcheck" id="resultcheck1"></td>
 <td><label class="resultchecklabel" for="resultcheck1">Text 1</label></td>
 </tr>

 <tr>
 <td><input type="checkbox" class="resultcheck" id="resultcheck2"></td>
 <td><label class="resultchecklabel" for="resultcheck2">Text 2</label></td>
 </tr>

</table>
...