代码之家 › 专栏 › 技术社区 › osos9

jQuery如何获取元素

jquery-ui html jquery javascript

osos9 · 技术社区 · 7 年前

我在下面有这段代码,我想检查每个输入(class=“Comment modal input”),如果它不是空的-获取其最接近的元素(class=“svg icon”),它位于层次结构的上层,并将其添加为class“active”。

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

有什么帮助吗?

2 回复 | 直到 7 年前

Carsten Løvbo Andersen Dan Nemtanu 7 年前

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

.closest('td') 将找到第一个 td 包含您的 $(this) .
.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>

-1

Stoycho Trenchev 7 年前

您最好将td comment元素作为父元素,并循环这些元素,检查每个元素下的注释模式输入是否解决了您的条件,然后在当前td comment元素下添加活动类。

此外,注释模式输入与代码中的注释模式输入不同:注释模式输入。

已编辑:

我得到了这个负数,但我是正确的:) 抱歉,没有发布代码。

$('.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>