父母意外的結果

所以我想弄清楚爲什麼我認爲應該工作不是，根據jQuery's API。父母意外的結果

簡要概述問題：

我有組和用戶的列表。組可能重疊的用戶的名單，正因爲如此我想在任意數量的組的複選框爲每個用戶同步他們可能會發生在

相關的HTML我穿越：

<div class="dest" ondragover="allowDrop(event)"> 
    <ul class="list-unstyled" data-role="role1"> 
     <li data-id="2"> 
      <div class="checkbox"> 
       <label> 
        <input name="role1" type="checkbox" value="1;2" checked="checked"> GroupName 
       </label> 
      </div> 
      <ul> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input name="role1Inclusions" type="checkbox" value="3;2;1" checked="checked">Person1 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input name="role1Inclusions" type="checkbox" value="3;2;2" checked="checked">Person2 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input name="role1Inclusions" type="checkbox" value="3;2;3" checked="checked"> Person3 
         </label> 
        </div> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <div class="checkbox"> 
       <label> 
        <input name="role1" type="checkbox" value="2;4" checked="checked"> Person4 
       </label> 
      </div> 
     </li> 
     <li> 
      <div class="checkbox"> 
       <label> 
        <input name="role1" type="checkbox" value="2;1" checked="checked"> Person1 
       </label> 
      </div> 
     </li> 
    </ul> 
</div>

說明的複選框值的結構如何：

第一個編號標識就是我要找的，1 = Group, 2 = Person, 3 = PersonInclusion。對於組和人員，第二個號碼分別是GroupId/PersonId。對於PersonInclusions，它是各自的GroupId，第三個數字是PersonId。

非工作的JavaScript（JSFiddle）：

$('.dest').on('change', 'input[type="checkbox"][value^="2;"], input[type="checkbox"][value^="3;"]', function() { 
    $('ul[data-role="' + $(this).parentsUntil('.dest').data('role') + '"] input[type="checkbox"][value$=";' + $(this).val().split(";").slice(-1)[0] + '"]:not([value^="1"])').prop('checked', $(this).prop('checked')); 
});

工作的JavaScript（JSFiddle）：

$('.dest').on('change', 'input[type="checkbox"][value^="2;"], input[type="checkbox"][value^="3;"]', function() { 
    $('ul[data-role="' + $(this).closest('.dest').children('ul').data('role') + '"] input[type="checkbox"][value$=";' + $(this).val().split(";").slice(-1)[0] + '"]:not([value^="1;"])').prop('checked', $(this).prop('checked')); 
});

如果檢查$(this).parentsUntil('.dest').data('role')裏面的功能，你會看到它的類型是undefined 。我覺得這很奇怪，因爲手動驗證data-role僅在上定義了子元素.dest非常容易。

任何想法？

謝謝！

來源

2015-10-21 charles

此使用的值，以容納化合物領域是混亂的。如果你能夠改變這種情況，將它們提取到它們自己的數據元素（例如data-group =「2」data-person =「1」）中，可能會使一些隨後出現的程序員變得更容易和更易讀。 – Taplar

它可能會使生成的html標記中的意圖更清晰，但我使用的是C＃，並且我無論如何都引用了一個枚舉。枚舉必須發送回服務器與表格以及相關的ID，以便我可以處理它，所以*至少*我必須讓他們的價值afaik.I應該可能複製它，但它提供了沒有額外的好處，老實說，我覺得它現在很可讀。 – charles

給你，現在。給另一個程序員，或者你從6個月後開始？祝你好運，:) – Taplar

之後加上.eq(-1)就可以了。我錯過了API返回元素的祖先s。我只希望在定義數據角色的地方。固定非工作的javascript如下：

$('.dest').on('change', 'input[type="checkbox"][value^="2;"], input[type="checkbox"][value^="3;"]', function() { 
    $('ul[data-role="' + $(this).parentsUntil('.dest', '[data-role]').data('role') + '"] input[type="checkbox"][value$=";' + $(this).val().split(";").slice(-1)[0] + '"]:not([value^="1"])').prop('checked', $(this).prop('checked')); 
});

JSFiddle

來源

2015-10-21 12:44:20 charles

.parentsUntil()返回一組元素。集合中的第一個元素是該方法被調用的元素的父元素。最後一個元素是匹配停止規則的子元素。

data(key)從集合中的第一個元素檢索數據。你想要的是最後一個。所以在.parentsUntil()

來源

2015-10-21 12:43:57

是的，我只是想通了。我不想'.eq（-1）'，但我想添加它提供的可選過濾器。雖然謝謝！ – charles

父母意外的結果

回答

相關問題