我需要 Jquery 中 div 自定义属性的值

Question

请检查下面的代码，

<div class="cp_option_color">
  
  <div id="cp-power-manual" class="configure-seats-section">
      <!-- power or manual append -->
   </div>
   <div class="validation-message" style="display:none">Please Select Color</div>
   <div class="cp-color-item-content" data-name="199538" style="display: none;">
      <h2>Black</h2>
      <ul>
         <li data-li="Power Recline">
            <div class="cp-recline" recline="power">
               Power Recline:
               <span class="">
                  <img src="checkmark.png" alt="">Ships in 
                  <lable class="shipmentmsg">6 Days</lable>
               </span>
            </div>
         </li>
      </ul>
   </div>
   <div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
      <h2>Brown</h2>
      <ul>
         <li data-li="Power Recline">
            <div class="cp-recline" recline="manual">
               Power Recline:
               <span class="">
                  <img src="checkmark.png" alt="">Ships in 
                  <lable class="shipmentmsg">6 Days</lable>
               </span>
            </div>
         </li>
      </ul>
   </div>
</div>

我需要 'recline' 属性的自定义属性值。如果你看到，它的父 div(cp-color-item-content) 有相同的 class 名称。但是一个是display none，另一个是display block。所以，我需要 'display:block' div 的自定义属性值（我需要 'manual' 值）。

我们将不胜感激。

谢谢

Answer 1

要在 HTML 中定义自己的 自定义属性 ，您需要使用 data-*

作为前缀

要获取您在 HTML 到 jQuery 中定义的 自定义属性 的值，您可以使用 .data() 方法.

查看下面的演示：

let customAttributeValue = $('#this-is-my-id').data('this-is-custom-id');
console.log(customAttributeValue)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="this-is-my-id" data-this-is-custom-id="manual"></div>

现在来看你的代码，你可以试试这个：

let reclineValue = $('.cp-recline:visible').data('recline');

console.log("reclineValue is: ",  reclineValue)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_option_color">

  <div id="cp-power-manual" class="configure-seats-section">
    <!-- power or manual append -->
  </div>
  <div class="validation-message" style="display:none">Please Select Color</div>
  <div class="cp-color-item-content" data-name="199538" style="display: none;">
    <h2>Black</h2>
    <ul>
      <li data-li="Power Recline">
        <div class="cp-recline" data-recline="power">
          Power Recline:
          <span class="">
                  <img src="checkmark.png" alt="">Ships in 
                  <lable class="shipmentmsg">6 Days</lable>
               </span>
        </div>
      </li>
    </ul>
  </div>
  <div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
    <h2>Brown</h2>
    <ul>
      <li data-li="Power Recline">
        <div class="cp-recline" data-recline="manual">
          Power Recline:
          <span class="">
                  <img src="checkmark.png" alt="">Ships in 
                  <lable class="shipmentmsg">6 Days</lable>
               </span>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 2

虽然您应该对自定义属性使用 data-recline="power"，但您可以使用

.attr("recline")

选择器可以包含 :visible 以排除隐藏的选择器，给出：

 $(".cp-recline:visible").attr("recline")

更新了代码段（HTML 没有变化）

console.log($(".cp-recline:visible").attr("recline"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="cp-power-manual" class="configure-seats-section">
      <!-- power or manual append -->
   </div>
   <div class="validation-message" style="display:none">Please Select Color</div>
   <div class="cp-color-item-content" data-name="199538" style="display: none;">
      <h2>Black</h2>
      <ul>
         <li data-li="Power Recline">
            <div class="cp-recline" recline="power">
               Power Recline:
               <span class="">
                  <img src="checkmark.png" alt="">Ships in 
                  <lable class="shipmentmsg">6 Days</lable>
               </span>
            </div>
         </li>
      </ul>
   </div>
   <div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
      <h2>Brown</h2>
      <ul>
         <li data-li="Power Recline">
            <div class="cp-recline" recline="manual">
               Power Recline:
               <span class="">
                  <img src="checkmark.png" alt="">Ships in 
                  <lable class="shipmentmsg">6 Days</lable>
               </span>
            </div>
         </li>
      </ul>
   </div>
</div>

我需要 Jquery 中 div 自定义属性的值

I need value of div custom attribute in Jquery

javascript

php

jquery

parent-child