JQuery & вложенные элементы

Question

Использование Jquery ...

Я хочу иметь возможность взять родительский элемент div и выполнить поиск по всем внутренним элементам, чтобы найти конкретный элемент, который может быть вложен ВСЕГДА в родительский элемент.

Затем я беру эти элементы и просматриваю их, основываясь на их значении, отключая / активируя разные элементы ...

Я также хочу сделать это таким образом, чтобы у меня было несколько наборов родительских элементов div, которые позволяют функциональным возможностям работать одинаково с определенными элементами в нем ...

так что если у меня есть ...

<div class="parent">
    <table>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" />
            </td>
        </tr>
    </table>
</div>

<div class="parent">
    <table>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" />
            </td>
        </tr>
    </table>
</div>

Любые изменения, которые я делаю в первом наборе текстовых полей, включают / отключают кнопку отправки для первой группы ... и то же самое для 2-й группы.

Теперь я установил jquery, чтобы он работал, если они не вложены дальше родительского div, установив класс родительского div в SubmitDisable ....

$(document).ready(function() {

    $('.SubmitDisable > input[type=submit]').attr('disabled', 'disabled');


    $('.SubmitDisable > input[type=text], input[type=textarea]').keyup(function() {
        $(this).siblings('input[type=submit]').removeAttr('disabled');

        $.each($(this).parent().children('input[type=text], input[type=textarea]'), function() {
            if ($(this).val() == "") {
                $(this).siblings('input[type=submit]').attr('disabled', 'disabled');
            }
        });

    });
});

Есть мысли? В конечном счете, я хочу иметь возможность взять любую страницу с этим jquery и поместить div вокруг группы текстовых полей и кнопок отправки, и это приведет к отключению кнопок, если все текстовые поля в одной и той же «группе» не заполнены.

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

<div class="SubmitDisable">
<div><div><div><input type="text" /></div></div></div>
<div><table><tr><td><div><input type="text" /></div></td></tr></table>
<span><div><b><input type="text" /></b></div></span>
<input type="submit" />
</div>

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

Answer 1

2 слова ... грубая сила ... Я действительно не уверен, есть ли другой способ сделать это ...

$(document).ready(function() {
    $('.SubmitDisable').find('input[type=submit]').attr('disabled', 'disabled');
    $('.SubmitDisable').find('input[type=text], textarea').keyup(function() {
        var objParent = $(this).parent();
        while (!($(objParent).attr('class') == 'SubmitDisable')) {
            var objParent = $(objParent).parent();
        }
        $(objParent).find('input[type=submit]').removeAttr('disabled');
        $.each($(objParent).find('input[type=text], textarea'), function() {
            if ($(this).val() == "") {
                $(objParent).find('input[type=submit]').attr('disabled', 'disabled');
            }
        });
    });
});

Я в основном беру этот объект и делаю шаг назад по одному родителю за раз, пока не найду div 'Parent', а затем не найду свой путь назад ... спасибо пикселине за предложение найти

Если кто-нибудь сможет найти лучший способ сделать это, он будет очень признателен.

Answer 2

ОК, поскольку единственными надежными данными является контейнер div.parent, обойдите все вокруг:

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

    $(document).ready(function() {
$('.SubmitDisable > input[type=submit]').attr('disabled', 'disabled');
$('div.parent input[type="text"], div.parent input[type="textarea"]').keyup(function(){

var parent = $(this).parents('div.parent');
$('input[type="submit"]',parent).attr('disabled','disabled');

    $('input[type="text"], input[type="textarea"]', parent).each(function(){
    if ($(this).val() !== "") {
                    $('input[type=submit]',parent).attr('disabled', '');
                }
    });

    });


    });

вы можете видеть, как он работает здесь (сначала нужно что-то ввести, а затем удалить, потому что код выполняется только при использовании ключа)