2

わかりました、これは簡単なはずです。<dl>データ定義とデータ ラベルを含む定義リスト ( ) があります。ユーザーが定義を定義できるように、データ定義の 1 つに入力があります。

次に、その定義のラベルの名前を取得しようとしています。デモでは、アラートは「cycle_3」で表示されます。

var myErrors = $('.myTest').prev('dt').text();
console.log(myErrors);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl>
  <dt> cycle_1:</dt>
  <dd> test </dd>
  <dt> cycle_2: </dt>
  <dd> test </dd>
  <dt> cycle_3: </dt>
  <dd>
    <input class="myTest" value="test" />
  </dd>
</dl>

4

3 に答える 3

11 
$('.myTest').parent().prev('dt').text();
于 2012-11-14T01:35:07.747 に答える
1

使用する.closest()

$('.myTest').closest('dd').prev('dt').text();
于 2012-11-14T01:40:23.667 に答える
0

この質問に来るのが非常に遅くなりましたが、ネイティブ JavaScript はこの要件を完全に達成できることを指摘しておく価値があります。

// here we retrieve the first element in the document which matches the
// selector passed to the document.querySelector() method (this method
// will return either the first matching element-node, or null if no
// element is found):
const input = document.querySelector('input'),

// here we navigate through the DOM from the <input> element found
// previously; we navigate to the first element (if any exists) that
// matches the selector passed to the Element.closest() method, and
// then from that <dd> element to its previous element-sibling,
// using the Node.previousElementSibling property:
      inputPreviousDT = input.closest('dd').previousElementSibling;

// here we use a template literal to interpolate the JavaScript expression
// - wrapped in the '${...}' block - into the string itself, to show the
// text-content of that element:
console.log(`The previous <dt> contains the text of: "${inputPreviousDT.textContent}"`);

// here we access the element-node, and use the classList API to
// add an orange background to further - visually - demonstrate
// that the correct <dd> element was found:
inputPreviousDT.classList.add('highlight');
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
}

dl {
  display: grid;
  gap: 0.5em;
  grid-template-columns: min-content 1fr;
}

dt {
  font-weight: 600;
  grid-column: 1;
  grid-row: auto;
}

dd {
  grid-column: 2;
  grid-row: auto;
}

.highlight {
  background-color: #f806;
}
<dl>
  <dt>cycle_1:</dt>
  <dd>test </dd>
  <dt>cycle_2: </dt>
  <dd>test </dd>
  <dt>cycle_3: </dt>
  <dd>
    <input class="myTest" value="test" />
  </dd>
</dl>

JS フィドルのデモ。

参考文献:

于 2021-03-12T21:18:07.030 に答える