Question

$(() => {
  $("#responseType").click(function(){
    var link = $(this).parent('div').prev().attr('data-type');
    console.log(link); 
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="documentWrapper" class="document-wrapper" tabindex="-1"><div class="document ui-selectable">
  <div class="element-selection question-selection ui-selectee" data-type="question">What are your short and long-term goals? How do you plan to use your MBA?</div>
  <div class="element-selection response-selection ui-selectee" data-type="response">Your short-term goals should be concrete and achievable, and your long-term goals should fit well with your passions and personality.</div>

  <div class="element-selection question-selection ui-selectee" data-type="question">How will you contribute to our campus?</div>  
  <div class="element-selection response-selection ui-selectee" data-type="response">Mention clubs and leaderships opportunities that you are interested in, and highlight any unique passions that you would bring to the student body.</div>

  <div class="element-selection question-selection ui-selectee" data-type="question1">What is your biggest strength? Your biggest weakness?</div>
  <div id="kbSelectionMenu">
            <label >
                <input type="radio" name="import-type" id="questionType" value="question">
                <label for="questionType">Question</label>
            </label>
            <label class="radio">
                <input type="radio" name="import-type" id="responseType" value="response">
                <label for="responseType" class="ui-selectee">Response</label>
            </label>

        </div></div>

  <p class="Normal DocDefaults  data-selection ui-selectee">&nbsp;</p></div></div>

在上面的html中有单选按钮。单击单选按钮时，我想获取单选按钮的父div之前的div属性“数据类型”。

我们尝试了上面的Jquery代码。此代码返回当前div的属性“ data-type”，而不是前一个。

Answer 1

.parent()选择元素的父元素，但是您需要使用.closest()从父元素集中选择与选择器匹配的第一个元素。

$("#responseType").click(function(){
  var link = $(this).closest('div').prev().attr('data-type');
  console.log(link); 
});

$("#responseType").click(function(){
  var link = $(this).closest('div').prev().attr('data-type');
  console.log(link); 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="documentWrapper" class="document-wrapper" tabindex="-1"><div class="document ui-selectable">
  <div class="element-selection question-selection ui-selectee" data-type="question">What are your short and long-term goals? How do you plan to use your MBA?</div>
  <div class="element-selection response-selection ui-selectee" data-type="response">Your short-term goals should be concrete and achievable, and your long-term goals should fit well with your passions and personality.</div>
  <div class="element-selection question-selection ui-selectee" data-type="question">How will you contribute to our campus?</div>  
  <div class="element-selection response-selection ui-selectee" data-type="response">Mention clubs and leaderships opportunities that you are interested in, and highlight any unique passions that you would bring to the student body.</div>
  <div class="element-selection question-selection ui-selectee" data-type="question1">What is your biggest strength? Your biggest weakness?</div>
  <div id="kbSelectionMenu">
    <label >
      <input type="radio" name="import-type" id="questionType" value="question">
      <label for="questionType">Question</label>
    </label>
    <label class="radio">
      <input type="radio" name="import-type" id="responseType" value="response">
      <label for="responseType" class="ui-selectee">Response</label>
    </label>
  </div>
  </div>
  <p class="Normal DocDefaults  data-selection ui-selectee">&nbsp;</p>
</div>

Answer 2

.parent()与当前匹配元素集中的每个元素的父元素匹配。在HTML结构中，广播的父级是您要查找的 label 元素，而不是 div 元素。

尝试.closest()，它通过测试元素本身并遍历 DOM 树中的祖先来匹配与选择器匹配的第一个元素。

请注意： ：最好使用.data()来获取/设置元素的命名数据存储区中的值。

var link = $(this).closest('div').prev().data('type');

$(() => {
  $("#responseType").click(function(){
    console.log($(this).parent().get(0).nodeName); // LABEL
    var link = $(this).closest('div').prev().data('type');
    console.log(link);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="documentWrapper" class="document-wrapper" tabindex="-1"><div class="document ui-selectable">
  <div class="element-selection question-selection ui-selectee" data-type="question">What are your short and long-term goals? How do you plan to use your MBA?</div>
  <div class="element-selection response-selection ui-selectee" data-type="response">Your short-term goals should be concrete and achievable, and your long-term goals should fit well with your passions and personality.</div>

  <div class="element-selection question-selection ui-selectee" data-type="question">How will you contribute to our campus?</div>  
  <div class="element-selection response-selection ui-selectee" data-type="response">Mention clubs and leaderships opportunities that you are interested in, and highlight any unique passions that you would bring to the student body.</div>

  <div class="element-selection question-selection ui-selectee" data-type="question1">What is your biggest strength? Your biggest weakness?</div>
  <div id="kbSelectionMenu">
      <label >
          <input type="radio" name="import-type" id="questionType" value="question">
          <label for="questionType">Question</label>
        </label>
        <label class="radio">
            <input type="radio" name="import-type" id="responseType" value="response">
            <label for="responseType" class="ui-selectee">Response</label>
        </label>

    </div>
  </div>

  <p class="Normal DocDefaults  data-selection ui-selectee">&nbsp;</p>
</div>

如果您确实要使用parent()，则必须在 DOM 树中上一个级别：

var link = $(this).parent().parent('div').prev().data('type');

$(() => {
  $("#responseType").click(function(){
    var link = $(this).parent().parent('div').prev().data('type');
    console.log(link);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="documentWrapper" class="document-wrapper" tabindex="-1"><div class="document ui-selectable">
  <div class="element-selection question-selection ui-selectee" data-type="question">What are your short and long-term goals? How do you plan to use your MBA?</div>
  <div class="element-selection response-selection ui-selectee" data-type="response">Your short-term goals should be concrete and achievable, and your long-term goals should fit well with your passions and personality.</div>

  <div class="element-selection question-selection ui-selectee" data-type="question">How will you contribute to our campus?</div>  
  <div class="element-selection response-selection ui-selectee" data-type="response">Mention clubs and leaderships opportunities that you are interested in, and highlight any unique passions that you would bring to the student body.</div>

  <div class="element-selection question-selection ui-selectee" data-type="question1">What is your biggest strength? Your biggest weakness?</div>
  <div id="kbSelectionMenu">
      <label >
          <input type="radio" name="import-type" id="questionType" value="question">
          <label for="questionType">Question</label>
        </label>
        <label class="radio">
            <input type="radio" name="import-type" id="responseType" value="response">
            <label for="responseType" class="ui-selectee">Response</label>
        </label>

    </div>
  </div>

  <p class="Normal DocDefaults  data-selection ui-selectee">&nbsp;</p>
</div>

获取父div的属性值

2 个答案: