jQuery如何获取元素

Question

我下面有这段代码，我想检查每个输入（class =“ Comment-modal-input”）是否不为空-获取其最接近的元素（class =“ svg-icon”），该元素在层次结构中较高并添加它分类为“活动”。

<td class="td-comment" style="text-align: center;">
    <a href="#0" title="Add Comment" class="comment-modalbttn">
       <svg width="30px" height="30px" class="svg-icon">
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS0105, 'assets/icons/utility-sprite/svg/symbols.svg#page')}"></use>
       </svg>
    </a>
    <!-- MBO MODAL -->
    <div>
       <div class="commentmodalcontainer">
           <div class="flex-comment-modal">
              <div class="comment-modal">
                <div class="comment-modal-close"><span>&#43;</span></div>
                  <div class="comment-modal-content">
                    <h2 class="comment-modal-title">Enter Comment</h2>
                    <apex:inputTextarea rows="5" styleClass="comment-modal-input" value="{!line.comment}" />
                  </div>
                  <div class="comment-modal-buttons">
                     <a href="#0">Cancel</a>
                     <a href="#0" onclick="updateJson();">Apply</a>
                  </div>
            </div>
          </div>
        </div>
     </div>
     <!-- END OF MBO MODAL -->
</td>

这是我想做的jQuery：

$('.comment-modal-input').each(function() {
    if ($(this).val()){
        var icon = $(this).parents('td').closest('.svg-icon');
        icon.addClass('active');
    }
});

有什么帮助吗？

Answer 1

要将类添加到SVG您需要使用.attr('class','class you want')

.closest('td')将找到包含您的$(this)的第一个td 。
.find('.svg-icon')将搜索td以及具有该类的任何元素

var icon = $(this).closest('td').find('.svg-icon');
icon.attr('class', 'svg-icon active');

演示

 $('.comment-modal-input').each(function() { if ($(this).val()) { var icon = $(this).closest('td').find('.svg-icon'); icon.attr('class', 'svg-icon active'); console.log(icon.attr("class")) } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td class="td-comment" style="text-align: center;"> <a href="#0" title="Add Comment" class="comment-modalbttn"> <svg width="30px" height="30px" class="svg-icon"> </svg> </a> <!-- MBO MODAL --> <div> <div class="commentmodalcontainer"> <div class="flex-comment-modal"> <div class="comment-modal"> <div class="comment-modal-close"><span>&#43;</span></div> <div class="comment-modal-content"> <h2 class="comment-modal-title">Enter Comment</h2> <input rows="5" class="comment-modal-input" value="{!line.comment}" /> </div> <div class="comment-modal-buttons"> <a href="#0">Cancel</a> <a href="#0" onclick="updateJson();">Apply</a> </div> </div> </div> </div> </div> <!-- END OF MBO MODAL --> </td> </tr> </tbody> </table> 

Answer 2

您最好将td-comment元素作为父元素并循环这些元素，并检查每个元素下的Comment-modal-input是否满足您的条件，然后在当前td-comment元素下添加活动类。

另外，Comment-modal-input与代码中的内容不同：comment-modal-input。

编辑：

我得到了这个减号，但我是正确的:)对不起，没有发布代码。

 $('.td-comment').each(function() { var $this = $(this), commentModalInput = $this.find('.comment-modal-input'), icon = $this.find('.svg-icon'); if (commentModalInput.val()) { icon.addClass('active'); } }); 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <table> <tbody> <tr> <td class="td-comment" style="text-align: center;"> <a href="#0" title="Add Comment" class="comment-modalbttn"> <svg width="30px" height="30px" class="svg-icon"> </svg> </a> <!-- MBO MODAL --> <div> <div class="commentmodalcontainer"> <div class="flex-comment-modal"> <div class="comment-modal"> <div class="comment-modal-close"><span>&#43;</span></div> <div class="comment-modal-content"> <h2 class="comment-modal-title">Enter Comment</h2> <input rows="5" class="comment-modal-input" value="{!line.comment}" /> </div> <div class="comment-modal-buttons"> <a href="#0">Cancel</a> <a href="#0" onclick="updateJson();">Apply</a> </div> </div> </div> </div> </div> <!-- END OF MBO MODAL --> </td> </tr> </tbody> </table>