Question

我想写一些jquery，说明.email div是否包含＆＃34; uic.edu＆＃34;将兄弟选择值指定为2。

我的代码将页面上的所有选择更改为值2 ...如何仅选出＆＃34;选择＆＃34;在.department-user中，该电子邮件包含＆＃39; uic.edu＆＃39;？

JS：

if ($(".department-user:contains('uic.edu')")) {
    $(".department-user select").val("2");
}

HTML

<li class="department-user">
    <div class="email">john@uic.edu</div>
    <div class="quick-assign">
        <select name="" id="">
            <option value="0">Michigan</option>
            <option value="1">california</option>
            <option value="2">Chicago</option>
        </select>
    </div>
</li>

Answer 1

你快到了！您只需要为文本检查选择正确的元素。此外，最好将这样的条件作为自己的变量来提高代码的可读性。

var isUicEdu = $(".department-user .email:contains('uic.edu')").length;

if (isUicEdu) {
    $(isUicEdu).siblings('.quick-assign').children('select').val("2");
}

Answer 2

$(".department-user:contains('uic.edu') .quick-assign > select").val(2);

Answer 3

纯JavaScript中的一种方法如下：

// a map of which domains map to which
// location (the values of the <select>):
var domainLocationMap = {
  'uic.edu': 'Chicago'
};


function selectFromDomain(node) {

  // the email is the text-content of the passed-in
  // node after that text-content is stripped of
  // leading and trailing white-space:
  let email = node.textContent.trim(),

    // using the Element.closest() method to find
    // the first ancestor element that matches the
    // supplied CSS selector:
    user = node.closest('li.department-user'),

    // using the querySelector() method to find the first,
    // if any should exist, element matching the supplied
    // CSS selector:
    select = user.querySelector('select'),

    // retrieving the substring of the email String
    // using String.prototype.substring(), setting
    // the first index to the index of the first
    // occurrence of the '@' character, and increasing
    // that index by 1 to remove that character from
    // the result:
    domain = email.substring(email.indexOf('@') + 1);

  // converting the children of the <select> element
  // to an Array, using Array.from(); and then filtering
  // that Array to retain only those <option> elements
  // whose text property is equal to the property of the 
  // domainLocationMap property with the key of the domain:
  Array.from(select.children).filter(function (opt) {
    return opt.text === domainLocationMap[ domain ];

  // Array.prototype.filter() returns the results of the
  // filtering, and here we iterate over that Array
  // using Array.prototype.forEach, with Arrow syntax,
  // to set the retained options ('opt') 'selected' property
  // to true:
  }).forEach(opt => opt.selected = true);

}

// converting the results document.querySelectorAll() to an Array,
// again using Array.from() and then iterating over the Array with
// Array.prototype.forEach(); calling the above function for each
// of the found <div class="email"> elements (if any were found):
Array.from(document.querySelectorAll('div.email')).forEach(function(mail) {
  selectFromDomain(mail);
});

＆＃13;

var domainLocationMap = {
  'uic.edu': 'Chicago'
};

function selectFromDomain(node) {
  let email = node.textContent.trim(),
    user = node.closest('li.department-user'),
    select = user.querySelector('select'),
    domain = email.substring(email.indexOf('@') + 1);

  Array.from(select.children).filter(function(opt) {
    return opt.text === domainLocationMap[domain];
  }).forEach(opt => opt.selected = true);

}

Array.from(document.querySelectorAll('div.email')).forEach(function(mail) {
  selectFromDomain(mail);
});

＆＃13;

<ul>
  <li class="department-user">
    <div class="email">john@uic.edu</div>
    <div class="quick-assign">
      <select>
        <option value="0">Michigan</option>
        <option value="1">california</option>
        <option value="2">Chicago</option>
      </select>
    </div>
  </li>
</ul>

＆＃13;

参考文献：

Jquery如果文本包含特定文本更改同级选择值

3 个答案: