如何選擇另一個div內的另一個div？

我有其中有許多問題塊的頁面，就像這樣：如何選擇另一個div內的另一個div？

<div class='questionBlock'> 
    <div class='questionBlockTitle '><span class='sectionQuestionBlockNumber'>4. </span><span class='sectionQuestionBlockTitle'>What can they do less of?</span> 

     <div class='msgErrorRequired'></div> 
     <div class='expandArrow downArrow'></div> 
    </div> 
    <div class='questionBlockExpand formQuestionPadding'> 
     <div class='sectionQuestionBlockHelpText'></div> 
     <input type='hidden' value='' name='13' mandatory='True' id='13' error=''> 
     <div style='width:700px;height:100px;' class='sectionItemBlock '> <span class='questionControl'> 
       <textarea id='qt_13' name='qt_13' style='width:695px;height:100px;' maxlength='100' question='13' disabled='disabled' ></textarea> 
      </span> 

     </div> 
    </div> 
</div>

我那麼有一些JQuery的，檢查所有的文字區域的頁面上，如果發現一個尚未填寫，然後修改錯誤消息div以顯示錯誤。

我一直無法引用此錯誤消息div。

到目前爲止，我得到這個：

$("#" + value).parents(".questionBlockExpand").parents(".questionBlock").siblings(".msgErrorRequired").html(msgErrorRequired);

但它似乎並沒有工作。

我是否正確引用它？

來源

2015-10-09 user2924019

但是textarea和.msgErrorRequired – user2924019

你的問題似乎是因爲.msgErrorRequired不是兄弟姐妹。 questionBlock。嘗試：

$("#" + value).parents(".questionBlockExpand").parents(".questionBlock").find(".msgErrorRequired").html(msgErrorRequired);

你可能過於簡化這個：

$("#" + value).closest('.questionBlock').find(".msgErrorRequired").html(msgErrorRequired);

來源

2015-10-09 14:13:42 AtheistP3ace

不在同一個div裏，我錯過了這個問題，但是我確實嘗試了爲questionBlockTitle添加第二個兄弟。 – user2924019

更新我的答案，爲您提供更短的解決方案。 – AtheistP3ace

這裏試試這個：

編輯：以反映意見

$("#" + value).parents(".questionBlock") 
       .find(".msgErrorRequired").html(msgErrorRequired);

來源

2015-10-09 14:14:23

這是行得通的。非常感謝。 – user2924019

你不需要第一個'.parents'，你最好使用'.find'而不是'.children'來更改你的html結構。（孩子只看起來一個級別，找到所有級別） –

不值得downvote，雖然 –

-1

如何優化這個：

$("#" + value + ' .questionBlockExpand .msgErrorRequired').html(msgErrorRequired);

來源

2015-10-09 14:17:17

錯誤..沒有。 **非常**不大可能的是expandblock/errormessage將是* textarea *的* children *。 –

我不確定這會起作用。我不認爲#value在這裏的頂部。 – AtheistP3ace

@ AtheistP3ace我已經複製了user2924019提供的代碼，使用一些值作爲id，然後按類查找其他div。 –

這會工作：

$('.noEmpty').each(function() { 
 
    var msgErrorRequired = 'You can\'t leave this field empty!'; 
 
    var $this = $(this); 
 
    if ($this.val().trim() == '') { 
 
    $this.closest(".questionBlock").find(".msgErrorRequired").html(msgErrorRequired); 
 
    } 
 

 
});

.msgErrorRequired { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='questionBlock'> 
 
    <div class='questionBlockTitle '><span class='sectionQuestionBlockNumber'>4. </span><span class='sectionQuestionBlockTitle'>What can they do less of?</span> 
 

 
    <div class='msgErrorRequired'></div> 
 
    <div class='expandArrow downArrow'></div> 
 
    </div> 
 
    <div class='questionBlockExpand formQuestionPadding'> 
 
    <div class='sectionQuestionBlockHelpText'></div> 
 
    <input type='hidden' value='' name='13' mandatory='True' id='13' error=''> 
 
    <div style='width:700px;height:100px;' class='sectionItemBlock '> <span class='questionControl'> 
 
       <textarea id='qt_13' name='qt_13' class="noEmpty" style='width:695px;height:100px;' maxlength='100' question='13' disabled='disabled' ></textarea> 
 
      </span> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-09 14:20:51 DelightedD0D

這裏是我的建議 - 寫，而其他加入他們的

$(function() { // can be on submit 
 
    $("textarea[name^='qt']").each(function() { 
 
    var val = $.trim(this.value); 
 
    $(this).closest(".questionBlock") 
 
    .find(".msgErrorRequired") 
 
    .html(val==""?"Please fill in":""); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='questionBlock'> 
 
    <div class='questionBlockTitle '><span class='sectionQuestionBlockNumber'>4. </span><span class='sectionQuestionBlockTitle'>What can they do less of?</span> 
 

 
    <div class='msgErrorRequired'>sss</div> 
 
    <div class='expandArrow downArrow'></div> 
 
    </div> 
 
    <div class='questionBlockExpand formQuestionPadding'> 
 
    <div class='sectionQuestionBlockHelpText'></div> 
 
    <input type='hidden' value='' name='13' mandatory='True' id='13' error=''> 
 
    <div style='width:700px;height:100px;' class='sectionItemBlock '> <span class='questionControl'> 
 
       <textarea id='qt_13' name='qt_13' style='width:695px;height:100px;' maxlength='100' question='13' >This is not empty</textarea> 
 
      </span> 
 

 
    </div> 
 
    </div> 
 
<div class='questionBlock'> 
 
    <div class='questionBlockTitle '><span class='sectionQuestionBlockNumber'>5. </span><span class='sectionQuestionBlockTitle'>What can they do more of?</span> 
 

 
    <div class='msgErrorRequired'>sss</div> 
 
    <div class='expandArrow downArrow'></div> 
 
    </div> 
 
    <div class='questionBlockExpand formQuestionPadding'> 
 
    <div class='sectionQuestionBlockHelpText'></div> 
 
    <input type='hidden' value='' name='14' mandatory='True' id='14' error=''> 
 
    <div style='width:700px;height:100px;' class='sectionItemBlock '> <span class='questionControl'> 
 
       <textarea id='qt_14' name='qt_14' style='width:695px;height:100px;' maxlength='100' question='14' ></textarea> 
 
      </span> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-09 14:25:39 mplungjan

如何選擇另一個div內的另一個div？

回答

相關問題