Question

<div id="divtemp-sc" class="container-fluid tab-pane active tab-padding" role="tabpanel" aria-labelledby="divtemp-sc">
  <div class="col-md-4">
    <div class="popup-temp-entry">
      <div class="entry-header">Title 1</div>
      <div class="entry-body">Description 1</div>
      <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="popup-temp-entry">
      <div class="entry-header">Title 2</div>
      <div class="entry-body">Description 2</div>
      <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="true">Include</a></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="popup-temp-entry">
      <div class="entry-header">Title 3</div>
      <div class="entry-body">Description 3</div>
      <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
    </div>
  </div>

</div>

我有这个div块，我想知道如何检查每个col-md-4嵌套div为entry-footer的div。检查template-include="false"是否为真。

我被要求用javascript / jquery编写它。但是，我对Web编程和Java还是很陌生。我一直在使用Google搜索和搜索参考文献，但仍然无法弄清楚该怎么做。

Answer 1

您需要使用jquery Attribute Equals Selector [name=”value”]来完成这项工作。

ab.a //err
ab.b //err

namespace DriverXMLSerialization
{
    [System.Xml.Serialization.XmlRoot("Driver")]
    public class MyDriver : Driver
    {
        // foo
    }
}

Answer 2

each遍历具有相同属性的元素，如果是类col-sm-4。

find在元素范围内寻找具有某些属性的元素。

$('.col-md-4').each(function() {
  if ($(this).find('.entry-footer-include-btn').attr('template-include') == 'true')
    console.log('true');
  else
    console.log('false');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="divtemp-sc" class="container-fluid tab-pane active tab-padding" role="tabpanel" aria-labelledby="divtemp-sc">
  <div class="col-md-4">
    <div class="popup-temp-entry">
      <div class="entry-header">Title 1</div>
      <div class="entry-body">Description 1</div>
      <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="popup-temp-entry">
      <div class="entry-header">Title 2</div>
      <div class="entry-body">Description 2</div>
      <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="true">Include</a></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="popup-temp-entry">
      <div class="entry-header">Title 3</div>
      <div class="entry-body">Description 3</div>
      <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
    </div>
  </div>

</div>

Answer 3

这里不需要jQuery。如果可以确定将有template-include到位，则可以像下面的代码片段一样简单。

我添加了评论以解释我在做什么。

document
  // find all elements that have some sort of templace-include set.
  .querySelectorAll('.entry-footer [template-include]')
  .forEach((elm) => {
    const value = elm.getAttribute('template-include') === 'true'; // check if it's true
    const header = elm
      .closest( '.popup-temp-entry' ) // find closest parent
      .querySelector( '.entry-header' ); // find the header
    console.log(`${ header.innerText } is ${ value }`);
    
    if ( value ) {
      header.style.color = 'green';
      header.style.fontWeight = 'bold';
    }
  });

<div class="popup-temp-entry">
  <div class="entry-header">Text 1</div>
  <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
</div>
<div class="popup-temp-entry">
  <div class="entry-header">Text 2</div>
  <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="true">Include</a></div>
</div>
<div class="popup-temp-entry">
  <div class="entry-header">Text 3</div>
  <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
</div>

Answer 4

实际上，不需要使用JQuery。以下代码段也可以在没有JQuery的情况下使用。 Mohammed使用的选择器也可以与javascript一起使用。

<div id="divtemp-sc" class="container-fluid tab-pane active tab-padding" role="tabpanel" aria-labelledby="divtemp-sc">
    <div class="col-md-4">
        <div class="popup-temp-entry">
            <div class="entry-header">Title 1</div>
            <div class="entry-body">Description 1</div>
            <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="popup-temp-entry">
            <div class="entry-header">Title 2</div>
            <div class="entry-body">Description 2</div>
            <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="true">Is true</a></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="popup-temp-entry">
            <div class="entry-header">Title 3</div>
            <div class="entry-body">Description 3</div>
            <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div>
        </div>
    </div>

</div>

<script>
    var element = document.body.querySelector(".col-md-4 .entry-footer [template-include='true']");
    element.style.color = "red"
    console.log("Content is "  + element.textContent)
</script>

检查CSS样式是否正确

4 个答案: