javascript - 使用 jQuery prev() 和 next() 查找正确的 SPAN 标记

Question

嘿，我需要以下 html 代码来获取 “提供最好的微笑” 的值，这似乎是 6 prev() 和 2 Next ()。

<div id="eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany" class="lfFormField
     lfFormFieldSelectMany  F_Form1-P_NewPage-F_SelectMany">
  <div class="">
    <fieldset class="composite-field-fieldset">
      <legend class="no-form-field-mandatory-sign-css">
        <span id="F_SelectMany-required"
              class="form-field-mandatory-sign-css lfFormFieldRequiredMarker no-form-field-mandatory-sign-css">*</span>
        <span class="form-field-title-sign-css lfFormLabel">deliver best smile</span>
      </legend>
      <div style="padding=left:0.1em" 
           dojoattachevent="onmouseover:onMouseOver, onclick:onClick, onmouseout:onMouseOut" 
           class="dojoDndHandle freedom-base-mixin-css" 
           id="eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany-widget" 
           widgetid="eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany-widget">
        <ul id="e2b7488e-a88c-4da0-8287-4f8e4e6091f4tbl" 
            dojoattachpoint="containerNode,focusNode" 
            class="selection-group">
          <li dojoattachpoint="listItem" 
              class="vertical-selection-group-item" 
              id="freedom_widget_solution_form_FreedomOptionButton_0" 
              value="0" type="checkbox"
              widgetid="freedom_widget_solution_form_FreedomOptionButton_0">
            <div class="selection-group-item-container notDojoDndHandle">
              <span dojoattachevent="onmouseover:onMouseOver, onclick:onClick, onmouseout:onMouseOut" 
                    class="selection-group-item-input dijitInline freedom-base-mixin-css freedom-base-mixin-cssChecked dijitChecked" 
                    widgetid="2ff949f4-c88e-4769-8e36-23c81661af92-btn">
                <input dojoattachpoint="textbox,focusNode,_aroundNode" 
                       id="2ff949f4-c88e-4769-8e36-23c81661af92-btn" 
                       class="dijitReset dijitCheckBox notDojoDndHandle" 
                       type="checkbox" tabindex="0" 
                       dojoattachevent="onclick:_onClick" 
                       role="checkbox" aria-checked="true" 
                       name="group_eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany-widget" 
                       value="Achieve and maintain quality" 
                       style="-webkit-user-select: none;">    
              </span>
              <div class="selection-group-item-text-container dijitInline">
                <label dojoattachpoint="titleNode" 
                       for="2ff949f4-c88e-4769-8e36-23c81661af92-btn" 
                       class="selection-group-item-text bold-selection-group-item">Achieve and maintain quality</label>
              </div>
            </div>
          </li>

我当时的立场是从输入标签中实现并保持质量值。

目前我尝试了以下方法:

if ($(this).is(":checked")) {
   var testing = $(this).prev().prev().prev().prev().prev().prev().next().next().html();
   console.log(testing);
   loop++;
}

var 测试是我试图从中获取该值的方法，但它出现了“未定义”，所以我猜我没有停在正确的位置？

任何帮助都会很棒!

Answer 1

您可以尝试遍历到父容器，然后按该元素的类查找该元素。

例如:

通过id遍历到父级:

$(this).closest('#eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany').find('.form-field-title-sign-css');

按类遍历到父级:

$(this).closest('.lfFormField').find('.form-field-title-sign-css');

或者通过 HTML 元素遍历到父元素:

$(this).closest('fieldset').find('.form-field-title-sign-css');

要获取该值，在这种情况下，您可能需要执行 .text() 而不是 .html()。当然，除非您确实想要所有 HTML。

最后，如果此 ID F_SelectMany-required 不是随机的。你可以这样做。这应该有助于它更具体一些。

$(this).closest('.lfFormField').find('#F_SelectMany-required').children('.form-field-title-sign-css');