2009-09-15 3 views
3

Использование Jquery ...JQuery и вложенные элементы

Я хочу, чтобы иметь возможность взять родительский 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> 

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

Теперь у меня есть 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> 

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

+0

Если вы можете выполнять такой же поиск в форме, а не в div, проблема становится намного проще. Вы пытаетесь использовать div вместо формы? –

+0

да ... каждая группа должна быть независимой друг от друга по функциональности – Patrick

ответ

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'); 
      } 
     }); 
    }); 
}); 

Я в основном принимая этот объект и отступив на один из родителей в то время, пока я не нашел «Parent» DIV, а затем нашел мою way back down ... kudos to pixeline для предложений Найти

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

1

КИ, так как единственные верные данные контейнера 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', ''); 
       } 
    }); 

    }); 


    }); 

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

+0

, которая не работает даже в примере, который у меня выше ...скажем, у меня есть нажатие клавиши в первом текстовом поле и запуск этого запроса в keyup, его поиск в текстовом поле/области в родительском окне текстового поля .., который будет его прямым родителем (td его в) – Patrick

+0

Я соответствующим образом пересмотрел свой ответ. – pixeline

+0

все еще проблема ... это должно работать при любых обстоятельствах ... не точно в таблице. одно текстовое поле может быть в td в tr в таблице в div внутри родителя, в то время как submit может быть только внутри родителя, а 2-е текстовое поле может быть 3 divs deep. – Patrick

Смежные вопросы